gpt4 book ai didi

css - position Absolute div 位于 Absolute 定位的父 div 的底部

转载 作者:行者123 更新时间:2023-11-28 07:57:30 28 4
gpt4 key购买 nike

我的“header_main”绝对定位,高度为 100%,基本上覆盖了整个屏幕。在 header_main div n 内还有另一个绝对定位的 div。我已将“icon-wrapper”div 设置为 bottom:0;但它不想定位绝对底部。

<body id="top" class="no-js">
<header id="header_main">
<div class="icon-wrapper"></div>
</header>
</body>

我的 CSS:

html, body {
height: 100%;
}

body{
font: 18px/27px $font-stack;
color: $text-color;
-webkit-font-smoothing: antialiased;
font-weight: 300;
}

#header_main{
height:100%;
width:100%;
position: absolute;
background: url('../images/ac-placeholder-img.jpg') no-repeat center center;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.icon-wrapper {
position:absolute;
height: 254px;
bottom: 0;
vertical-align:bottom;
}

最佳答案

可以通过给top:100%;对于图标包装器,它将始终位于 header_main 的底部,请查看下面的工作演示;

#header_ main{
height:100%;
width:100%;
position: absolute;
background:#ddd;

}
.icon-wrapper {
position:absolute;
height: 254px;
bottom: 0;
background:red;

top:100%;
vertical-align:bottom;
}
<body id="top" class="no-js"> <header id="header_main"> Scroll Down<div class="icon-wrapper">ww</div> </header> </body>


关于css - position Absolute div 位于 Absolute 定位的父 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30013753/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com