绝对定位元素的奇怪行为

Question

  <div class="flex-item">
                   <div class="mag">
                      <div class="mag-tag">Press Release</div>
                      <div class="mag-content no-image">
                         <time datetime="2016-05-12T19:00">May 15</time>
                         <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
                      </div>
                   </div>
                </div>

     <div class="flex-item">
                   <div class="mag">
                      <div class="mag-tag">SPEECH</div>
                      <img src="data:image/png;base64,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" />
                      <div class="mag-content">
                         <time datetime="2016-05-12T19:00">May 15</time>
                         <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
                      </div>
                   </div>
                </div>

 .mag{
        position:relative;
   border:solid 1px black;
    }

    .mag-tag {
        background-color: blue;
        padding: 5px;
        color: #fff;
        position: absolute;
        top: 30px;
        left: 0;
        text-transform: uppercase;
        font-size: 0.8em;
        padding-left:15px;
        padding-right:15px;
        padding-top:10px;
        padding-bottom:10px;
    }

    .no-image{
        margin-top:100px;
    }

    .mag-content{
        padding:10px;

        time{
            color:black;
            font-size:0.8em;
            margin-bottom:0.5em;
            display:block;
            padding-left:20px;
        }

        h2{
            font-size:1em;
            font-weight:bold;
            position: relative;
            padding-left: 20px;
            display: inline-block;

        }
    }

我希望 mag-tag 元素悬停在图像上，但如果没有图像，我想将内容向下推，这样它就不会被标签隐藏。这一切都适用于代码笔示例，但如果我删除 border:solid 1px black；从 .mag 然后 mag-tag 也被向下推 100px？

任何人都可以解释一下，因为我不想要边框，它只是为了显示差异而提供的。

Answer 1

如果你想推动它，给 .mag 一些 padding-top 和 img 相同的负值 margin-top。

.mag {
  padding-top: 75px;
}
.mag img {
  margin-top: -75px;
}

在此处查看预览：

* {
  font-family: 'Segoe UI';
  margin: 0;
  padding: 0;
  list-style: none;
}
.mag {
  position: relative;
  border: solid 1px black;
  padding-top: 100px;
}
.mag img {
  display: block;
  margin-top: -100px;
}
.mag-tag {
  background-color: blue;
  padding: 5px;
  color: #fff;
  position: absolute;
  top: 30px;
  left: 0;
  text-transform: uppercase;
  font-size: 0.8em;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

<div class="mag">
  <div class="mag-tag">Hello</div>
  <img src="data:image/png;base64,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"
  alt="" />
</div>

<div class="mag">
  <div class="mag-tag">Hello</div>
</div>

预览

绝对定位元素的奇怪行为

Strange behavior of absolutely positioned element

css

absolute