CSS定位relative、absolute、fixed使用总结

定位

同浮动一样,定位的目的或定位的价值是为了更好的摆放盒子,更好的实现网页布局。
浮动更多的实现一行多个盒子并排布局,而定位可以任意摆放盒子的位置。

案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss

其它Web文章
Html+Css基础学习第一章
CSS基础学习之第二章
CSS浮动的使用和解决浮动的五种方法
原生开发WebApi知识点总结
开发中常用jQuery知识点总结
C3动画+H5+Flex布局使用总结
ES6常用知识总结
Vue学习知识总结
开发环境到生产环境配置webpack
待续......

本编文章会讲到的知识点

  • 定位的属性
  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位
  • 改变元素的显示模式
  • 子绝父相
  • 叠放次序
  • 元素的显示和隐藏
  • 定位总结
定位的属性

定位的属性分为边偏移定位的方式
针对定位,定位的方式 要和 边偏移移配合使用。

定位方式:
方式 作用
position:static;元素在标准文档流中默认的 静态定位,所有元素默认定位。
postion:relative; 相对定位
postion:absolute; 绝对定位
position:fixed; 固定定位
边偏移:
属性 作用 示例
top 以顶部为基准调控位置 top:10px; top:-10px;
left 以左侧为基准调控位置 left:10px; left:-10px;
right 以右侧为基准调控位置 right:10px; right:-10px;
bottom 以底部为基准调控位置 bottom:10px; bottom:-10px;
边偏移
静态定位
什么是静态定位

position:static;
静态定位是所有元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
上面的话翻译成白话: 就是网页中所有元素都默认的是静态定位哦! 其实就是标准流的特性。

静态定位的特性

在静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素的位置。

相对定位
什么是相对定位

positon:relative;
相对定位是将元素相对于它在标准流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置。

相对定位的特性

相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有,没有脱离标准文档流。
每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置。 自恋型)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            background: gold;
        }

        .two {
            width: 300px;
            height: 300px;
            /* 
                    相对定位:
                        特点:
                            →可以使用边偏移
                            →没有脱离标准文档流
                            →位置调控时(使用边偏移),参考的自身起初原有的位置。 (自恋型)
                            → 不会改变元素的显示模式
                 */
            position: relative;
            top: 50px;
            left: 50px;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</body>

</html>
相对定位
绝对定位
什么是绝对定位

position:absolute;
脱离标准文档流的定位,可以通过边偏移属性调控位置。

绝对定位的特性
  • 脱离标准文档流。
  • 可以使用边偏移样式属性控制位置。
  • 拼爹型,总是以其父或祖先先中最近的定位(relative、absolute、fixed)元素为参考。如果其父或祖先先中没有定位,就以body元素为参考。
  • 会改变元素的显示模式,变为行内块级元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 300px;
            background: gold;
            border: 1px solid red;
        }
        .two{
            position: absolute;
            width: 200px;
            height: 200px;
            background: blue;
            top: 50px;
            left: 50px;;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</body>
</html>
绝对定位
固定定位
什么固定定位

position:fixed
以浏览器为参考,脱离标准文档流,可用边偏移属性控制位置

固定定位的特性
  • 脱离标准文档流。
  • 可用边偏移属性控制位置。
  • 调控位置时,永远以浏览器为参考。(固执型)
  • 会改变元素的显示模式,变为行内块级元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            font-size: 50px;
        }

        .div-fix{
            width: 200px;
            height: 200px;
            background: gray;
            position: fixed;
            right: 10px;
            top: 300px;
        }
    </style>
</head>
<body>
    <div class="div-fix"></div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
    <div>德玛西亚</div>
</body>
</html>
固定定位
改变元素的显示模式

上面我们已经说过绝对定位固定定位都会改变元素的显示模式,模式变为行内块元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span{
            /* 绝对定位和固定定位会改变元素的显示模式 */
            
            /* position: absolute; */
            position:fixed;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background: red;
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>
改变元素的显示模式
子绝父相

对于绝对定位和相对定位,在实际开发中,哪个应用最多?
一起配合使用最多!子绝父相(子元素绝对定位,父元素相对定位)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        /* 子绝父相 */
        div{
            width: 300px;
            height: 300px;
            background: gray;
            position: relative;
        }
        span{
            position:absolute;
            width: 100px;
            height: 100px;
            background: red;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
    </div>
</body>
</html>
子绝父相
叠放次序

当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。

如何设置盒子之间的层叠(叠放顺序)

在CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素设置CSS的z-index层叠等级属性,其取值可为正整数、负整数和0。比如: z-index: 2;
注意:

  • z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
  • 如果取值相同,则根据书写顺序,后来居上。
  • 后面数字一定不能加单位。
  • 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        /* 
            子绝父相
            z-index值越大越居上
         */

        div{
            width: 300px;
            height: 300px;
            background: gray;
            position: relative;
        }
        .one{
            position:absolute;
            width: 100px;
            height: 100px;
            background: red;
            top: 50px;
            left: 50px;
            z-index: 10;
        }
        .tow{
            position:absolute;
            width: 100px;
            height: 100px;
            background: blue;
            top: 70px;
            left: 70px;
            z-index: 8;
        }
        .three{
            position:absolute;
            width: 100px;
            height: 100px;
            background: gold;
            top: 90px;
            left: 90px;
            z-index: 9;
        }
    </style>
</head>
<body>
    <div>
        <span class="one"></span>
        <span class="tow"></span>
        <span class="three"></span>
    </div>
</body>
</html>
层叠次序
元素的显示和隐藏
display

display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block(inline-block) 除了转换为块级元素之外,同时还有显示元素的意思。
特点: 隐藏之后,不再保留位置。

visibility

设置或检索是否显示对象。
visible :  对象可视
hidden :  对象隐藏
特点: 隐藏之后,继续保留原有位置。(停职留薪)

overflow

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible :  不剪切内容也不添加滚动条。
auto :   超出自动显示滚动条,不超出不显示滚动条
hidden :  不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll :  不管超出内容否,总是显示滚动条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .one {
            background: red;
            display: none;
        }

        .two {
            background: blue;
        }

        .three{
            background: gold;
            visibility: hidden;
        }

        .four{
            background: gray;
        }

        .five{
            background: green;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- display用法 -->
    <div class="one"></div>
    <div class="two"></div>
    <!-- visibility -->
    <div class="three"></div>
    <div class="four"></div>
    <!-- overflow -->
    <div class="five">大家好我叫白云,我叫黑土,他是我老公,她是我老母,宋丹丹赵本山小品</div>

</body>

</html>
元素的隐藏和显示
定位总结:
定位模式 是否脱标占位置 可否使用边偏移 移动位置基准 可否转换元素显示模式
静态:static 不脱标,占位置 不可以 正常模式 不可以
相对:relative 不脱标,占位置 可以 元素自身(自恋型) 不可以
绝对:absolute 脱标,不占位置 可以 其上最近的并且定位的(relative、absolute、fixed)父元素或祖先元素(拼爹型) 可以,转换为行内块级元素。
固定:fixed 脱标,不占位置 可以 浏览器(固执型) 可以,转换为行内块级元素。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,101评论 1 91
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 788评论 0 6
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 4,667评论 0 15
  • CSs概述 cascading style sheets 层叠样式表 简称为样式表 2.作用 用来去设置ht...
    newTmorrow阅读 265评论 0 0
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,061评论 0 5