定位的用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{margin: 0;padding: 0;color: #fff;text-align: center;}
        .container{
            width: 800px;height: 200px;background: #4c77f2;
            position: absolute;;top:50%;left:50%;margin-top: -100px; margin-left: -400px;

        }
    </style>
</head>
<body>
    <div class="container">这是页面内容</div>
    
</body>
</html>

老师给的例子里面，top:50%是不是相对body设置50%?这样跟相对视口设置50%是否有区别？

saltymelon 2018-12-13

源自：CSS网页布局基础 2-1 经典的行布局（1）

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-12-13 14:07:38

你好同学 , 视频中老师的例子是根据浏览器视口进行定位的 . 和同学代码中参照的效果是一样的 . 因为浏览器的用户代理不同 ,有的是根据html ,body进行定位的 , 有的是根据浏览器视口进行定位的 .

相对于body定位和相对于视口定位是有区别的 , 例如你的浏览器视口高度是1000px ,而页面body高度为2000px . 那么相对于这个两个定位的话 , 计算的top:50%的偏移是不一样 . 相对于视口的50%是500px , 相对于body的50%是1000px . 从而达到的位置不一样 .

希望解答了你的疑惑, 祝学习愉快 ,望采纳 .

收起回答

saltymelon 提问者 #1

可是2-8 position-absolute视频里，老师说如果没有最近祖先元素，会认<body>为父级的，设置的百分比是相对于body来设置的。为什么在这里同样也是absolute，设置宽高百分比就变成了相对于浏览器视口定位了呢？

2018-12-13 14:24:54
好帮手慕夭夭回复提问者 saltymelon #2

你好同学 , 老师在回复中有讲到哦, 可以再看一下 . 因为浏览器的用户代理不同 ,有的是根据html ,body进行定位的 , 有的是根据浏览器视口进行定位的 .这是浏览器自身机制原因 .

2018-12-13 19:17:42