CSS3中的定位（逆战班）

通过本周在逆战班的学习，基本弄懂了CSS3中定位的取值、分类和作用。
首先我们要知道在CSS3中，浮动（float）主要是解决左右排列的问题，而定位（position）主要是解决叠加排列的问题。

定位的取值分为四大类：相对定位（position relative）、绝对定位（position absolute）、固定定位（position fixed）、粘性定位（position sticky）。

相对定位（position relative）：不使元素脱离文档流，空间是会被保留的，不影响其他元素的布局。如果没有定位偏移量，对元素本身没有任何影响，如果存在偏移量是根据元素当前位置进行偏移；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        #box1{ width:100px; height:100px; background: red;}
        #box2{ width:100px; height:100px;background-color: blue; position: relative; left: 10px; top: 10px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

绝对定位（position absolute）：使元素完全脱离文档流，让内联元素具备块元素的特性，让块元素支持内联元素的特性。如果绝对定位元素的父容器存在定位，会相对于父容器发生偏移，如果父容器不存在定位，则会相对于整个文档发生偏移；

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box1{width: 100px; height: 100px; background-color: blue;}

.box2{width: 100px; height: 100px;background-color: red; position: absolute;top: 50px; left: 50px;}

</style>

</head>

<body>

</div>

</body>

</html>

固定定位（position fixed）；和绝对定位比较相似的是使文档脱离文档流，使内联元素具备块元素的特性，使块元素具备内联元素的特性，但是不同的是固定定位（position fixed）是相对于整个浏览器窗口进行偏移的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{width: 100%; height: 1000px;}
        .box2{width: 100px; height: 100px;background-color: red; position: fixed;top: 100px; left: 0;}
    </style>
</head>
<body>
   <div class="box1">
       <div class="box2"></div>
   </div>
</body>
</html>

固定定位是不会改变位置的，浏览器滚动条滑动，其位置也不会改变。
粘性定位（position sticky）的主要作用就是在没有达到指定位置时，是没有定位效果的，到达了指定位置后，就会变成固定定位。
定位的偏移都是由方向left、right、top、bottom加上值组成的，单位为px；例如：left：50px就是向左偏移50个像素，取值可以为负数。

CSS3中的定位（逆战班）

猜你喜欢