[CSS]CSS定位

最新推荐文章于 2020-11-11 19:56:06 发布

Feathers .

最新推荐文章于 2020-11-11 19:56:06 发布

阅读量726

点赞数 2

分类专栏： Web前端文章标签： css html position

本文链接：https://blog.csdn.net/xf616510229/article/details/53811177

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS除了浮动，还有一个对应的属性定位。
CSS有三种定位，这三种定位再页面中各有用途，也可以配合使用。

相对定位

position:relative
相对对位，是盒子相对于原始位置的位置改变。
我定义了三个不浮动的盒子，每个盒子的大小为80px x 80px，我将第二个盒子进行相对定位，定位代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box1{
            width: 80px;
            height: 80px;
            background-color: skyblue;
        }
        .box2{
            width: 80px;
            height: 80px;
            background-color: orange;
            /*使用相对定位，将盒子向右下方移动 40px*/
            position: relative;
            top: 40px;
            left: 40px;
            /*设置下变局 40px*/
            margin-bottom: 40px;
        }
        .box3{
            width: 80px;
            height: 80px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果：
这里写图片描述

我们看到，
1. 我们设置的明明是top: 40px; left: 40px; 但是盒子并没有向左上方移动，恰恰相反，盒子却朝右上角移动。这也是一个很令人无语的现象，暂时体会不到设计者的心意。所以，我们要注意：top是向下移动，bottom 向上移动，left向左移动，right向右移动。
2. 我们可以看到第二个盒子的没有脱离文档流（他原来的位置仍然占一行），所以相对定位不会使元素脱离文档流
3. 因为相对定位没有脱离文档流，所以，他移动后的会留下一片空白。
4. 给box2设置margin发现，margin仍然作用在box2原来的位置上，这是因为相对布局并不是真正的让元素的位置发生了改变，只是浏览器的渲染机制将盒子绘制到别的位置了而已。

作用

因为相对定位会留下”坑”，所以，相对定位和其他定位相比，用处很小。主要用于微调元素和做绝对定位的参考。
下面来说一下绝对定位：

绝对定位

position:absolute
相对定位是相对于原来的位置的改变，绝对定位则是将浏览器左上角或页面左上角作为原点，进行位置的变换。

绝对定位会脱离标准流

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            .box1{
                width: 80px;
                height: 80px;
                background-color: skyblue;
            }
            .box2{
                width: 80px;
                height: 80px;
                background-color: orange;
                position: absolute;
            }
            .box3{
                width: 80px;
                height: 80px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>

这里写图片描述
只能看到两个盒子，中间的盒子脱离了文档流，第三个盒子代替了第二个盒子的位置。第二个盒子浮动在第三个盒子上方。所以我们只能看到两个盒子。

绝对定位的参考点

绝对定位有四个属性，top、bottom、left、right，用来准确定位。这四个属性各有各的用途。top属性和bottom属性虽然都是用来定位的，但是二者之间仍然有一定的区别。

top

蓝色区域为页面。这里不再用代码演示。
bottom
如果使用bottom的话，则定位的参考点，就会变为浏览器首屏窗口尺寸，对应页面的左下角
有下面者一段代码，box0盒子距离浏览器底边的距离为100px，距离左边距离为150px
```
.box0{
    width: 50px;
    height: 50px;
    background-color: #000;
    position: absolute;
    bottom: 100px;
    left: 150px;
}
```
效果：

当我缩放浏览器后，发现：
left和right属性
left和right属性的定位，要依据参考点，
如果是top、left 则定位点为页面的左上角
而如果是top、right 则定位点为页面的右上角
bottom、left 定位点为浏览器首屏的左下角
bottom、right 定位点为浏览器首屏的右下角
当上层元素也是定位的元素，那么，就会以上层元素作为参考点。上层元素不仅仅指父元素。

注意，上层元素的任何定位方式，都可以作为参考点
绝对定位会无视父容器的padding
绝对定位后，盒子如何居中？
因为绝对定位后，元素脱离了文档流，所有margin:0 auto就会失效，我们可以使用绝对定位的方式，使元素居中
```
position: absolute;
left: 50%; 
top: 0;
margin-left: width/2;   /*宽度的一半*/
```