DavidB DavidB - 13 days ago 5
CSS Question

Strange behavior of absolutely positioned element

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;

}
}


I want the mag-tag element to hover over the image, but if there is no image I want to push the content down so it isn't hidden by the tag. This all works on the code pen example, but if I remove border:solid 1px black; from .mag then mag-tag is also pushed down by 100px?

Can anyone explain this as i do not want the border, its just provided to show the difference.

Answer

If you wanna push it, give the .mag some padding-top and the img the same negative value of margin-top.

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

See the preview here:

* {
  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>

Preview

preview