相对定位的问题
来源：6-2 作业题
weibo_豆沙_馅饼子_0
2018-04-24 01:58:14
我的是main里面包含了banner,banner里面包含了banner-slide，那么我设置了main为relative, banner为absolute,相对于main相对定位，但是我banner-slide想相对于banner定位，那么设置banner-slide为absolute,可是这个时候banner也是absolute,那么它怎么相对于它的父元素banner定位呢？
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<!--按钮-->
<div class="button">
<!--子按钮-->
<span class="sub-button yellow">首页</span>
<span class="sub-button">点击看看</span>
<span class="sub-button">会自动的</span>
<span class="sub-button yellow">我的网站</span>
</div>
<!--banner图-->
<div class="banner">
<div class="banner-slide slide1 active"></div>
<div class="banner-slide slide2"></div>
<div class="banner-slide slide3"></div>
<div class="banner-slide slide4"></div>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin:0;
}
.main{
width: 1200px;
height: 460px;
margin:30px auto;
font-family: "Microsoft YaHei";
background: #fff;
position: relative;
}
.button{
width: 1200px;
height: 60px;
font-size: 0;
}
.sub-button{
display: inline-block;
width: 25%;
height:100%;
font-size: 20px;
line-height: 60px;
text-align: center;
color: #666;
}
.yellow{
background: #ffcc00;
}
.banner{
width: 1200px;
height: 400px;
position: absolute;
top: 60px;
left: 0;
}
.banner-slide{
width: 1200px;
height: 400px;
position: absolute;
top: 0;
left: 0;
background: #0f0;
display: none;
}
.active{
display: block;
}
1回答
-
只要父元素不是正常文档流,子元素都可以相对于父元素定位,不是一定要设置子元素绝对定位 父元素相对定位的~
1h018-04-24
相似问题