css 定位position

最新推荐文章于 2024-04-21 22:38:54 发布

蔡蔡动起来

最新推荐文章于 2024-04-21 22:38:54 发布

阅读量222

点赞数

分类专栏： css 文章标签： css position relative absolut

本文链接：https://blog.csdn.net/weixin_40512519/article/details/81272950

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML三种布局方式：

标准流
浮动
定位

position属性：决定了元素如何定位。通过top、right、bottom、left实现位置。

5个可选参数：static(默认)、relative、absolute、fixed、inherit

通过absolute，元素可以放置到页面的任何位置。

通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。

position 以及参数总结

position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流
position: relative; 相对于自己在文档流中的初始位置偏移定位。
position: fixed; 相对于浏览器窗口定位。
position: absolute; 是相对于父级非position:static 浏览器定位。
1. 如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。
2. 这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。
3. 如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。

absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。

static 默认值，就是没有定位，那就没必要多解释了。inherit 继承父元素，基本上这个参数用得相当少，所以也不做过多的解释。

文档流布局的概念

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。
内联元素也不会独占一行。几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。
有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。但是在IE6中浮动元素也存在于文档流中。

position:relative 相对定位

相对自己文档流中的原始位置定位。它的特点是——不会脱离文档流。

其元素依旧在文档流中，他的位置可以使用 left、right、top、bottom、z-index等定位参数

我给test3加上了position:relative定位效果。代码如下：

position: relative;left: -20px;top: 20px;

并没有对周围的元素有任何的影响！！

.div1{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            left: 20px;
            top: 20px;
        }

<div class="div1"></div>

当left和top时：

right和bottom时：

 .div1{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            right:70px;
            bottom: 70px;
        }

<div class="div1"></div>

也就是原点在（70,70）的位置上。

position:fixed 相对浏览器定位

相比而言，这个参数是最好理解的。它相对于浏览器的窗口进行定位。同时——它会脱离文档流

好，还是上图片。

代码如下：

position: fixed;right:20px;top: 20px;

这是初始状态，我们可以看到它的特点：
1. 它脱离了文档流，原来文档流中不存在它的位置，test4好像test3不存在一样的紧贴在了test2的后面。
2. 它的right:20px;top: 20px;参数是相对浏览器窗口定位的。

好，我们再来看一下，当页面发生滚动的效果图。

当页面发生了滚动，我们可以看到，页面的内容已经根据滚动条的位置发生了位移。但是我们的test3 依旧是在相对于浏览器的位置。

position:absolute 绝对定位

“生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。”

它可以相对于各种各样的东西进行定位。除了 static 其他都可以！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

如上图所示。我们可以看到，test3既没有相对于父元素定位，也没有相对于爷元素定位。它居然和position:fixed一样！相对于浏览器定位了！！

！！！这是一个错觉！！！

我们来看一下浏览器发生滚动之后的效果，

如上图所示，它并非是相对于浏览器定位，而是相对于文档定位。

如果你有一点js基础的话，那么应该很容易理解。$(document)和$(window)的差别（为了看得清楚，用了JQ写法）

相对于文档，就是相对于整个页面来进行布局，而相对于窗口，则是相对于浏览器的可视区域进行定位，这二者有本质的区别的。

它的父元素的属性是 `position:relative`

上面，我们已经说过了，position:relative是相对于自身原始位置定位，其自身并没有脱离文档流。而它的子元素，使用position:absolute参数是什么效果呢？我们来做个试验。下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: relative;left: 50px;top: 50px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: -20px;top: -20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

从这个试验我们可以看出，当一个元素设置了position:absolute属性之后，而它的父元素的属性为position:relative则，它不再是相对于文档定位，而是相对于父元素定位。

这一点非常重要。最最重要的是，父元素设置为position:relative并不会脱离文档流，也就是说——利用给父元素设置position:relative属性，再将子元素设置为position:absolute就可以在文档流中实现需要的定位

它的父元素的属性是 `position:fixed`

上面，我们说了父元素为position:relative的情况，这种情况比较常见，那么它的父元素为 position:fixed 又是什么情况呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: fixed;right: 20px;top: 20px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;left: -40px;top: 40px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

它的父元素的属性是 `position:absolute`

好，我们来看一下，如果position:absolute嵌套position:absolute元素将会出现什么情况呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: absolute;right: 20px;top: 20px;}
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

如上所示，test2我们使用了position: absolute;right: 20px;top: 20px;参数，那么，它会相对于文档作出设定的偏移值。而我们给test3使用了同样的css样式。如果test3也是相对于文档定位的话，那么它和test2应该是重叠的。

但是，我们根据上面的解释，test3应该相对于test2定位才对，那么是不是呢？我们看效果图：

.bro{
         width: 100px;
         height: 100px;
         background: blue;
     }
 .test{
         width: 100px;
         height: 100px;
         background: red;
         position: absolute;
         left:70px;
         top: 70px;
     }

<div class="bro"></div>
<div class="test"></div>

 .bro{
         width: 100px;
         height: 100px;
         background: blue;
     }
     .test{
         width: 100px;
         height: 100px;
         background: red;
         position: absolute;
         right:100px;
         top: 150px;
     }

<div class="bro"></div>
<div class="test"></div>

则以正方形的右上顶点为原点距离浏览器右上顶点。

right:100px;bottom:150px;正方形的右下顶点距离浏览器的右下顶点。以此类推。

即使body设置宽高，也是距离页面距离，忽视body的宽高。

 <style>

        *{
            margin: 0;
            padding: 0;
        }
        .per{
            width: 300px;
            height: 300px;
            background: blue;
            position: absolute;
            left:300px;
            top: 300px;
        }

        .test{
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            left: 100px;
            top: 100px;
        }


    </style>
</head>
<body>
<div class="per">
<div class="test"></div>
</div>

不受限制于父元素。这就是固定定位与绝对定位的区别

 <style>

        *{
            margin: 0;
            padding: 0;
        }
        .per{
            width: 300px;
            height: 300px;
            background: red;

        }

        .test{
            width: 100px;
            height: 100px;
            background: blue;
            position: inherit;
            left: 100px;
            top: 100px;
        }


    </style>
</head>
<body>
<div class="per">
<div class="test"></div>
</div>

<style>

        *{
            margin: 0;
            padding: 0;
        }
        .per{
            width: 300px;
            height: 300px;
            background: red;
            position: fixed;
            left: 200px;
            top: 200px;

        }

        .test{
            width: 100px;
            height: 100px;
            background: blue;
            position: inherit;
            left: 100px;
            top: 100px;
        }


    </style>
</head>
<body>
<div class="per">
<div class="test"></div>
</div>