关于position属性的问题
来源：4-3 编程练习
怒焰狂暴
2020-01-03 12:24:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
width:100%;
height:4033px;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) no-repeat;
position: relative;
}
/* .picture:nth-child(1){
width:224px;
height:364px;
background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png);
position: fixed;
left:1679px;
top:50%;
margin-top:-182px;
}
.picture:nth-child(2){
width:224px;
height:364px;
background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png);
position: fixed;
top:50%;
margin-top:-182px;
} */
.picture:nth-child(1){
position:fixed;
width:224px;
height:364px;
background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png);
top:50%;
right:0;
margin-top:-182px;
}
.picture:nth-child(2){
position:fixed;
width:224px;
height:364px;
background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png);
top:50%;
left:0;
margin-top:-182px;
}
</style>
</head>
<body>
<div class="content">
<div class="picture"></div>
<div class="picture"></div>
</div>
</body>
</html>
在这段代码中，给子元素.picture添加了position:fixed属性，父元素.content没有添加position无论有没添加，都不会影响页面显示效果，就是什么时候添加absolute和relative（虽然知道这两个函数的意义，但是实在不懂用在哪些地方，固定页面上，父元素无论添加哪个元素好像没区别，除非用到了栏目偏移，例如之前讲的课程里。）
1回答
-
好帮手慕星星
2020-01-03
同学你好，代码实现效果很棒！
针对提问问题解答：
1、fixed固定定位是相对浏览器视口显示的，父元素不需要添加任何定位。
2、absolute定位是相对于最近定位的祖先元素进行显示的，如果需要相对于父元素（祖先元素）定位，那么父元素（祖先元素）设置定位就好，相对定位，绝对定位都是可以的，主要是看父元素（祖先元素）的效果，视情况而定。
3、relative是相对于自身定位显示的，不过元素不会脱离文档流，仍然占据原来的位置，使用视情况而定，一般与子元素absolute配合。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题