如何将div移动到绝对div的底部和顶部

我有一个Codepen link，我有一个绝对定位的div，它有两个孩子。如何将div移动到绝对div的底部和顶部

我试图移动一个孩子到div的顶部，而另一个底部，但不能完全弄清楚bottom:0和top:0。我也试图只使用其中一个元素的内容宽度，而不是整个父元素的宽度。

2016-12-22 Kim Lee

事件标签和事件标题元素需要具有position：absolute和X，Y分配。例如，左：0，上：0。我看到他们的父母是绝对的。如果你不需要绝对定位那些他们可能的位置：相对的。检查[这里]（http://stackoverflow.com/a/32919558/3377049）不同的选项，使容器只与内容一样宽。 –

更改CSS：

.event-type-label{ 
    background: rgba(161,178,166,.8); 
    border-radius: 2px; 
    overflow: hidden; 
    font-family: Lato; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    color: #fff; 
    position: absolute; 
    top: 0; 
    font-size: 0.8em; 
    font-weight: 300; 
    letter-spacing: .05em; 
    line-height: 1; 
    padding: 5px; 
} 

.event-header-title { 
color: #fff; 
position: absolute; 
bottom:0; 
font-family: Lato; 
font-size: 3em; 
font-weight: 300; 
line-height: 120%; 
margin: .5rem 0; 
}

添加position:absolute到孩子的将解决你的问题。由于绝对定位元素仅占用内容的宽度。

来源

2016-12-22 20:36:08 Jay

您可以使用flex -box像这样的example。或者只是使用position: absolute and add all styling to a sub span来使用所需的空间。

来源

2016-12-22 20:29:14 Faegy

我试图避免使用flexbox。我做了一个解决方法，把'absolute' div设置为'relative'，然后让每个元素'position：absolute' –

你可以使用['absolute' position]（http://codepen.io/anon/pen/RoOYRK？编辑= 1100） – Faegy

做了一些CSS调整 - 你很近！只需要position: absolute正确的元素以及top和bottom和position: relative父母。

通过这样做，元素的宽度会自动限制到其内容。

看看我的意见，看看是什么被添加和删除。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    box-style: border-box; 
 
    margin: 0px 
 
} 
 
.event-page { 
 
    width: 100%; 
 
    height: 100% 
 
} 
 
.event-page-header { 
 
    position: relative; 
 
    height: 450px; 
 
    max-height: 70vh; 
 
    padding: 0 0 1.75rem; 
 
    width: 100%; 
 
} 
 
.event-page-header .event-header-content { 
 
    width: 100%; 
 
    height: 100%; 
 
    /*position: absolute; // removed */ 
 
    z-index: 200; 
 
    padding: 0 20px; 
 
    /*bottom: 0; // removed */ 
 

 
    /* added 1 line: */ 
 
    position: relative; 
 
} 
 
.event-type-label { 
 
    background: rgba(161, 178, 166, .8); 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    font-family: Lato; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    font-size: 0.8em; 
 
    font-weight: 300; 
 
    letter-spacing: .05em; 
 
    line-height: 1; 
 
    padding: 5px; 
 

 
    /* added 2 lines: */ 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.event-header-title { 
 
    color: #fff; 
 
    font-family: Lato; 
 
    font-size: 3em; 
 
    font-weight: 300; 
 
    line-height: 120%; 
 
    margin: .5rem 0; 
 

 
    /* added 2 lines: */ 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.event-header-image { 
 
    background: red; 
 
    position: absolute; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 100; 
 
} 
 
@media (min-width: 769px) { 
 
    .event-header-image::after { 
 
    background: linear-gradient(rgba(65, 77, 87, 0), rgba(65, 77, 87, .7)); 
 
    bottom: 0; 
 
    content: ''; 
 
    height: 70%; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    } 
 
}

<div class='event-page'> 
 
    <header class='event-page-header'> 
 
    <div class="event-header-content"> 
 
     <div class="event-type-label">Event Tag</div> 
 
     <h1 class="event-header-title">Event Title</h1> 
 
    </div> 
 
    <div class='event-header-image'></div> 
 
    <div class="clear"></div> 
 
    </header> 
 
</div>

来源

2016-12-22 20:35:25

如何将div移动到绝对div的底部和顶部

回答

相关问题