个人中心
gpt4 book ai didi

html - 绝对定位图像下方的位置 Div

转载 作者：太空宇宙 更新时间：2023-11-04 14:39:24 25 4
gpt4 key购买 nike

我正在为 friend 创建一个网站。但是我想在绝对定位的图像下方放置一个包含 4 个部分的 div。这必须是这种情况，因为我希望它在不使用任何 javascript 的情况下随着窗口大小的变化而调整大小。任何人都可以想办法做到这一点。

页面如下:

https://dl.dropboxusercontent.com/u/24713212/0001_Adam_Plowdem_Videography/html/index.html

基本上，无论浏览器大小如何，我都希望颜色鲜艳的部分紧跟在图像之后。

非常感谢任何帮助，谢谢，

马特

<style>

body{
width: 99%;
height: 1050px;
background-color: #FFF;
font: 80%/1.65 "Open Sans", sans-serif;
}

#header{
width: 100%;
height: 50px;
position: fixed;
top:0;
left:0;
background-color: #FFF;
    /* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EBE8E4));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #EBE8E4 100%);
border-bottom: 1px solid rgba(0,0,0,0.4);
}

#nav{
width: 600px;
position: absolute;
top: 0;
right:0;
height: 50px;
margin-right: 20px;

}

#nav ul{
list-style: none;
height: 50px;
position: absolute;
top: 0;
margin: 0;
display: block;
right:0 !important;
}

#nav li{
display: inline-block;
height: 50px;
border-bottom: none;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#nav li a{
display: block;
height: 50px;
padding-top: 16px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px !important;
border-bottom: none;
color: #000;
text-decoration: none;
/*text-transform: uppercase;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#nav a:hover{
color: #000;
background: rgba(0,0,0,0.1);
-webkit-transition: all 0.15s ease-out 0;
-moz-transition: all 0.15s ease-out 0;
transition: all 0.15s ease-out 0;
}

.banner {
height: 100%;
width: 100%;
color: #fff;
text-align: center;
background: url(img/adam.jpg) center center;
background-size: cover;
position:absolute;
top:50;
left:0;
z-index:-2;
border-bottom: 1px solid rgba(0,0,0,0.4);
-webkit-box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px;
box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px;
/*position: relative;
margin-top: -60px;*/
}

.overlay {
height: 100%;
width: 100%;
color: #fff;
text-align: center;
background: url(img/overlay.png) center center;
background-size: cover;
position:absolute;
top:50;
left:0;
z-index:-1;
border-bottom: 1px solid rgba(0,0,0,0.4);
/*position: relative;
margin-top: -60px;*/
}


.about {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: red;
display: block;
}

.about2 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: blue;
display: block;
}

.about3 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: yellow;
display: block;
}

.about4 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: green;
display: block;
}

#container{
background-color: red;
margin: auto;
padding: 0;
width: 1000px;
height: 70%;
}


</style>

<html>

<head>
</head>

<body>

<!-- Start Navigation -->
<div id="header">
    <div id="nav">
        <ul>
            <li><a href="#">about</a></li>
            <li><a href="#">work</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">contact</a></li>
        </ul></div>
</div>
<!-- End Navigation -->

<!-- Start Main Image -->

<section class="banner" style="height: 100%;">
</section>

<!-- End Main Image -->
<div style="width: 99%;
height: 100%;">
<section class="about">
  <h5>Hello World</h5>
</section>
<section class="about2">
  <h5>Hello World</h5>
</section>
<section class="about3">
  <h5>Hello World</h5>
</section>
<section class="about4">
  <h5>Hello World</h5>
</section>
</div>
</body>

</html>

最佳答案

您可以在下面制作包含所有“关于”部分的 div 样式。

height: 100%;
margin-top: 50px;
position: absolute;
top: 100%;
width: 99%;

这将使 div 恰好在图像结束位置之后开始。这将解决您的问题。

关于html - 绝对定位图像下方的位置 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19427827/

25 4 0
文章推荐： c++ - 用 malloc 替换 operator new
文章推荐： html - 使用CSS平衡两个不同容器中元素的高度
文章推荐： c++ - 将第二个指针分配给第一个指针指向的对象
文章推荐： html - 元素的不同边距
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com