02-CSS基础与进阶-day9_2018-09-12-20-29-40

最新推荐文章于 2019-06-23 11:17:00 发布

weixin_30484739

最新推荐文章于 2019-06-23 11:17:00 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HiJackykun/p/11069711.html

博客介绍了CSS中的定位方式，包括静态定位、相对定位、绝对定位和固定定位。详细说明了绝对定位的脱标、参考点，以及“子绝父相”原则和绝对定位盒子的居中方法。还提到固定定位的参考点、脱标特性和低版本IE6的兼容性问题。

定位
静态定位 position: static
相对定位 position: relative
绝对定位 position: absolute 脱标参考点
子绝父相
让绝对定位的盒子水平居中和垂直居中
固定定位 position: fixed
参考点浏览器左上角
固定定位的元素脱标不占有位置
兼容性 ie6低版本不支持固定定位

02绝对定位的应用.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .fa {
            width: 600px;
            height: 300px;
            margin: 60px auto;
            background-color: skyblue;
            position: relative;
        }
           
        /*让儿子盒子水平居中*/   
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* margin: 0 auto; 对绝对定位的盒子无效*/
            position: absolute;
            left: 50%; /*百分比参考父亲的宽度*/
            margin-left: -100px; /*自己的宽一半*/
            top: 50%;
            margin-top: -50px;
            /* left: 300px;
            top: 150px; */
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
</html>