css中的position定位

最新推荐文章于 2022-03-23 13:36:25 发布

qq_40108183

最新推荐文章于 2022-03-23 13:36:25 发布

阅读量462

点赞数

本文链接：https://blog.csdn.net/qq_40108183/article/details/78309457

版权

之前在我选择学前端的时候，其实没什么自学基础，初学前端时，我记得当时有个任务是很简单的把照片放到一个网页正中央，当时我弄这个花了1个多小时，对于css定位完全无厘头的我看了很多关于position定位的很多博客，才终于明白它的position布局都是如何实现的，现在我就给大家分享下我的学习理解

一、文档流布局

首先我们先来了解文档流布局，什么是文档流？这是百度比较全面官方的解释

将窗体自上而下分为一行行，并在每行中从左至右的排放元素，这就是文档流

其中，脱离文档流有三种方式，即为浮动float，绝对定位absolute，固定定位fixed

正常文档流布局

如上图所示，这就是正常的文档流，一个挨一个，第一行没位置了，再排下一行

二、position定位

这方面不懂的，大家也可以去http://www.3c页面去了解，相应的参数为如下：

absolute（绝对定位）：相对于static以外的第一个父元素定位，分别用“left”“right”“top”“bottom”进行定位

relative（相对定位）：相对其正常元素再进行定位，如“left：20”会先向left元素添加20像素

fixed（固定定位）：相对于浏览器窗口进行定位

static（默认元素），按正常定位

inherit（继承）：从父元素继承定位

relative——相对定位

最大的特点就是不脱离文档流！！什么意思？？

效果如下：position：relative；left：-20px；top:20px;

position:relative定位效果

也就是说，它的原来位置还在，其他的元素位置也就不会因为它的改变而改变！！！

fixed——固定定位

相对于浏览器窗口而定位，效果如下：position：fixed；right：20px;top:20px;

position:fixed相对浏览器定位效果二

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>

实现效果如图：其中test2是test1的子元素，test3是test2的子元素

position:absolute效果一

发现，test2，test1正常定位，而test3的位置有点怪，为什么呢？给大家解释下，因为父元素若为static的话，它则是相对于文档而定位，大家不要以为是根据窗口而定位，这样就和fixed一样了，no，no，no！如果我们实现网页滑动，它是不会随着窗口滑动而往下滑的！！

若父元素为relative呢？代码如下：

<!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效果3

如图所示，test2相对于自身文档流中的位置发生了偏移，test3相对于test2发生了偏移

这个非常重要！它也就说明了如果给父元素定义为relative相对定位的时候，子元素再定义absolute绝对定位时，不会脱离文档流了！也就是说给父元素实现relative定位时，再实现absolute定位时就可以实现需要的位置了！！

父元素为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效果4

由于test2的父元素为static，所有它的位置是相对于文档流而定位的，test3则相对于test2的位置在实现定位！！

如果父元素为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>

这时的效果图就是这样了

position:absolute效果5