CSS重点-定位 随学笔记

CSS重点-定位 position

为什么需要定位? 有些效果,标准流或浮动都无法快速实现,此时需要定位来实现:     1.浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。     2.定位则是可以让盒子*的在某个盒子内移动位置或固定屏幕中某个位置,并且可以压住其他盒子。 定位组成:     定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。     定位=定位模式 + 边偏移 *定位模式用于制定一个元素在问当中的定位方式。边偏移则决定了该元素的最终位置。 定位模式:     定位模式决定元素的定位方式,他通过CSS的position属性来设置,其值可以分为四个:     参数:     static                静态定位     relative             相对定位     absolute             绝对定位     fixed                 固定定位 边偏移:     边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right四个属性。     参数:     属性             示例                   描述     top              top:80px            顶端偏移量,定义元素相对于其父元素上边线的距离。     bottom         bottom: 80px         底部偏移量,定义元素相对于其父元素下边线的距离。     left             left:80px             左侧偏移量,定义元素相对于其父元素左边线的距离。     right           right:80px              右侧偏移量,定义元素相对于其父元素右边线的距离。 (一)静态定位 静态定位是元素的默认定位方式,无定位的意思。     语法:     选择器:{     position: static;   }  静态定位按照标准流特性摆放位置,它没有边偏移。 这种定位在不居中很少使用。 (二)相对定位 相对定位是元素在移动位置的时候,是相对于他原来的位置来说的。(自恋型) 语法:     选择器{         position:relative;     } 特点(重要):     1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。     2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待他,(不脱标,继续保留原来的位置) 因此,相对定位并没有脱标,他最典型的应用是给绝对定位当爹的。 (限制绝对定位)
<style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

(三)绝对定位

绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的(拼爹型)。 语法:     选择器 {             position: absolute;     } 绝对定位的特点(重点):     1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Docutment文档)     2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。     3.绝对定位不再占有原来的位置(脱标)。
<style>
        .son {
            position: absolute;
            /* top: 0;
            left: 0; */
            top: 100px;
            right: 200px;
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        .father {
            /* 祖先元素有定位 */
            /* position: relative; */
            width: 500px;
            height: 500px;
            background-color: chartreuse;
        }
        .box {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="son"></div>
    <div class="father">
        <div class="box"></div>
    </div>
</body>

(四)固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。 语法:   选择器 {         position: fixed;   } 特点(重要):     1.以浏器的可视窗口为参照点移动元素。     注意:    (1).跟父元素没有任何关系。               (2).不随滚动条滚动。     2.固定定位不占由原来的位置。 固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。
<style>
        .dj {
            position: fixed;
            top: 100px;
            left: 40px;
        }
    </style>
</head>
<body>
    <div class="dj">
        <img src="images/pvp.png">
    </div>
</body>
固定定位小技巧:固定在版心右侧 小算法:     1.让固定定位的盒子left:50% 走到浏览器可视区(版心)的一半位置。     2.让固定定位的盒子margin-left:版心宽度的一半距离。 多走版心宽度的一半位置,就可以让固定定位的盒子贴着版心右侧对齐了。   ------------------------------------------------------------------------------------------------------------------------------------- 子绝父相的由来: 子绝父相:通俗的讲就是自己是绝对定位的话,父级要用相对定位。 注意:     1.子级用绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。     2.父盒子需要加定位限制子盒子在父盒子内显示。     3.父盒子布局时,需要占有位置,因此父亲只能是相对定位。 这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。 总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位。 粘性定位(了解): 粘性定位可以被认为是相对定位和固定定位的混合。Sticky  粘性的 语法:     选择器 {         position:sticky;top: 10px;     } 特点:     1.以浏览器的可视窗口作为参照点移动元素(固定定位的特点);     2.粘性定位占有原先的定位(相对定位的特点);     3.必须添加top、left、right、bottom中的一个才有效。 跟页面滚动搭配使用,兼容性较差,IE不支持。
<style>
        body {
            height: 3000px;
        }
        .nav {
            position: sticky;
            top: 0px;
            width: 800px;
            height: 50px;
            background-color: coral;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav">我是导航栏
    </div>
</body>

*定位的叠放次序  z-index

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴) 语法:     选择器 {         z-index:1;     } 注意:     数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上;     如果属性值相同,则按照书写顺序,后来居上;     数字后面不能加单位;     只有定位的盒子才有z-index属性。 定位的拓展: 1.绝对定位的盒子水平垂直居中: 加了绝对定位的盒子不能通过margin:0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中:     left:50%;     margin-left:盒子一半宽度的负值     top:50%;     margin-top:盒子高度一半的负值
<style>
        .box {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
2.定位特殊特性 绝对定位和固定定位也和浮动类似。     (1).行内元素添加绝对或者固定定位,可以直接设置高度和宽度。     (2).块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。 --> 3.脱标的盒子不会触发外边距塌陷        浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题 --> 4.绝对定位(固定定位)会完全压住盒子        浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里的文字(图片),但绝对定位(固定定位)会压住下面标准流所有的内容。 浮动之所以不会压住文字,是因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。
上一篇:使用sharding-jdbc实现水平分库+水平分表


下一篇:专访京东科技张亮:本土开源需形成吸纳开发者的靶心