absolute在没有最近定位祖先元素

absolute在没有最近定位祖先元素会认body做爹，这里.banner-slide最近没有定位的祖先元素啊，为什么不以body绝对定位，即为什么图片还是在main盒子里

攻下这座城 2018-07-31

源自：项目：JavaScript轮播图 2-2 轮播图样式（2）

收起

3回答

好帮手慕阿莹 2018-07-31 15:43:51

其实这里是以body为绝对定位的，同学可以试一下，给banner-slide加一个：

top:100px;

left:100px;

为了有个参照，我们在给main和banner设置了同级的div：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>图片轮播</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>123456789</div>
 <div class="main">
  <!-- 图片轮播 -->
  <div>123456789</div>
  <div class="banner">
   <a href="">
    <div class="banner-slide slide-1 slide-active"></div>
   </a>
   <a href="">
    <div class="banner-slide slide-2"></div>
   </a>
   <a href="">
    <div class="banner-slide slide-3"></div>
   </a>
  </div>
  
</body>
</html>

css:

*{
 padding:0;
 margin:0;
}
 
ul{
 list-style-type: none;
}
 
body{
 font-family: "Microsoft YaHei";
 color: #14191e;
}
 
.main{
 width: 1200px;
 height: 460px;
 margin:30px auto;
 overflow: hidden;
 
}
 
.banner{
 width: 1200px;
 height: 460px;
 overflow: hidden;
position: relative;
}
.banner-slide{
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
    top:100px;
    left:100px;
    display: none;
}
 
.slide-active{
 display: block;
}
 
.slide-1{
 background-image:url("../images/bg1.jpg");      /*这里不能简写成background 因为简写会覆盖上面的background-repeat属性 然后这里又需要重新写*/
}
 
.slide-2{
 background-image:url("../images/bg2.jpg");      /*这里不能简写成background 因为简写会覆盖上面的background-repeat属性 然后这里又需要重新写*/
}
 
.slide-3{
 background-image:url("../images/bg3.jpg");      /*这里不能简写成background 因为简写会覆盖上面的background-repeat属性 然后这里又需要重新写*/
}

你会发现，它是相对于body偏移的。我们可以对比一下给banner加上绝对定位和不加绝对定位的现象：

不给banner添加绝对定位的时候：

给banner添加绝对定位的时候：

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者攻下这座城 #1

为什么最开始的时候没设置top和left main不在body的左上角呢

2018-07-31 16:04:54
好帮手慕阿莹回复提问者攻下这座城 #2

如果都没有设置，则与原文档流一致。

2018-07-31 17:43:33
提问者攻下这座城回复好帮手慕阿莹 #3

前面的概念有点混淆了，我明白了，谢谢了老师

2018-07-31 22:01:09

提问者攻下这座城 2018-07-31 14:23:33

css：

*{
padding:0;
margin:0;
}

ul{
list-style-type: none;
}

body{
font-family: "Microsoft YaHei";
color: #14191e;
}

.main{
width: 1200px;
height: 460px;
margin:30px auto;
overflow: hidden;

}

.banner{
width: 1200px;
height: 460px;
overflow: hidden;

}
.banner-slide{
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
    display: none;
}

.slide-active{
display: block;
}

.slide-1{
background-image:url("../images/bg1.jpg"); /*这里不能简写成background 因为简写会覆盖上面的background-repeat属性然后这里又需要重新写*/
}

.slide-2{
background-image:url("../images/bg2.jpg"); /*这里不能简写成background 因为简写会覆盖上面的background-repeat属性然后这里又需要重新写*/
}

.slide-3{
background-image:url("../images/bg3.jpg"); /*这里不能简写成background 因为简写会覆盖上面的background-repeat属性然后这里又需要重新写*/
}

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main">
  
  <div class="banner">
   <a href="">
    <div class="banner-slide slide-1 slide-active"></div>
   </a>
   <a href="">
    <div class="banner-slide slide-2"></div>
   </a>
   <a href="">
    <div class="banner-slide slide-3"></div>
   </a>
  </div>

</body>
</html>