http://codepen.io/DaveBatt83/pen/mOwRea
<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？
任何人都可以解释这一点，因为我不希望边界，只是为了显示区别而提供了边界。
最佳答案
如果要推动它，请给.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>预习
关于css - 绝对定位元素的奇怪行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40786235/