Python项目资料收集&面试题前端收集

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

2019-05-14  本文已影响83人  艾曼大山

定位

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

demo地址: https://github.com/pengjunshan/WebPJS

其它Web文章
Html+Css基础学习第一章
CSS基础学习之第二章
CSS浮动的使用和解决浮动的五种方法
待续......

本编文章会讲到的知识点

定位的属性

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

定位方式：
方式 作用
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;
脱离标准文档流的定位，可以通过边偏移属性调控位置。

绝对定位的特性
<!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;
注意：

<!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 脱标，不占位置 可以 浏览器（固执型） 可以，转换为行内块级元素。
上一篇下一篇

猜你喜欢

热点阅读