专栏首页Devops专栏CSS 定位布局 - 相对、绝对、固定三种定位

CSS 定位布局 - 相对、绝对、固定三种定位

仅供学习,转载请注明出处

文档流

文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。

关于定位

我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:

  • relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。
  • absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
  • fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
  • static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。
  • inherit 从父元素继承 position 属性的值。

定位元素的偏移

定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

看了上面关于定位的一些概念,下面就可以手写几个示例来看看。

relative 相对定位的示例

relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。

首先使用三个div来看看文档流部署的情况,如下:

从上面的三个div来看,就是正常的文档流布局的情况,绿色的div直接再黄色的div上方,而黄色由于有绿色的div占据了上面的文档流布局的位置,导致黄色被挤到了下方。

而相对定位的布局是不会影响文档流布局的。假设我想要使用相对定位对绿色的div进行偏移,那么就是根据绿色div的文档流布局的位置进行相对偏移的。

假设想要达到上图的偏移效果,该怎么做呢?

从代码看出,只要在绿色div的样式属性设置了position:relative;之后,就可以使用lefttop 设置与原来文档布局位置的偏移量。

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outside{
            width: 500px;
            height: 600px;
            border: 1px solid #000;
            margin: 50px auto 0;
        }

        .outside div{
            width: 200px;
            height: 100px;
        }

        .box1{
            background-color: green;
            position: relative;
            left: 50px;
            top: 50px;
        }

        .box2{
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="outside">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

absolute绝对定位示例

absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。

在上面相对定位的示例中,元素相对定位是基于文档流原来的位置进行偏移定位的。那么,绝对定位是基于什么的呢?

将刚才关于设置相对定位的代码改为绝对定位看看。

当设置绿色的div为绝对定位之后,发现黄色的div不见了。 其实,黄色的div并不是不见了,而是跟绿色的div重叠了。因为当绿色div设置为绝对定位之后,就会脱离文档流布局,此时绿色的div就相当于漂浮了起来,黄色的div就没有被绿色div挤下来,自然就上去与绿色div重叠在一起了。

那么下面来设置一下偏移看看。

此时绿色的div并不是基于最外层的div进行偏移的,简单来看是根据浏览器进行偏移的,也就是body。

这是为什么呢?可以放大浏览器再来看看绿色div的偏移,可能更加直观。因为上面我缩放了浏览器的宽度一半。

那么为什么绿色的div是与body进行偏移呢?因为绿色div的父级元素外层div没有设置定位。

如果我给外层div设置一下绝对定位,或者相对定位,是不是就可以以外层的div进行偏移呢?

先给外层div设置相对定位来看看:

好了,从浏览器的呈现来看,设置相对定位就可以让绿色div以外层div进行相对偏移。下面再来看看绝对定位。

父元素div设置了绝对定位之后,的确绿色div就以外层div进行偏移了。但是同时父级div也与body进行了定位,需要重新设置偏移量才可以居中。

但是这样写死肯定很不方便,所以还是直接用相对定位比较合适。

fixed固定定位

fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。

上面已经测试使用了绝对定位,绝对定位基本是与父级元素进行偏移定位的。那么fixed固定定位按照描述应该就直接是基于body进行偏移定位的。

那么这个怎么去验证呢?先看看原来基于父级定位的绝对定位的div情况如下:

将绿色div的绝对定位改为固定定位,如下:

从上面的结果来看,固定定位是完全不管父级元素是否设置了定位属性的,直接就与body进行定位偏移。

这种定位方式最适合用于放广告了。

定位元素层级 z-index

定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级。

为什么需要元素的层级呢?例如当在做一个弹框的时候,需要弹框不被其他任何元素覆盖,那么则可以设置弹框的元素的层级为最高即可。

下面写个示例来理解一下:

从上图可以看出最后写的红色div就是层级最高的,没有被其他div覆盖。

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outside{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
        }

        .outside div{
            width: 200px;
            height: 200px;
            position: absolute;
        }

        .box1{
            background-color: blue;
            left: 20px;
            top:20px;
        }

        .box2{
            background-color: green;
            left: 40px;
            top:40px;
        }

        .box3{
            background-color: pink;
            left: 60px;
            top:60px;
        }

        .box4{
            background-color: red;
            left: 80px;
            top:80px;
        }


    </style>
</head>
<body>
    <!-- div.outside>(div.box$)*4 -->
    <div class="outside">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

那么如果,我想要将第一个蓝色div不被覆盖,那么就可以设置蓝色div的层级为10(因为默认元素的层级小于10)

当然,如果设置弹框不知道其他元素的层级到底多少,则可以设置999之类的最大数值即可,那样就不用被其他元素覆盖了。

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

理解练习

制作如下布局:

首先写两个div出来,如下

将数字5的div定位到第一个div的右上角

设置圆角属性

border-radius: 14px;这里的 14px 代表圆半径就是 14px。所以,设置后div直接就是一个圆了。

那么下面看看外部的大div设置圆角会怎么样?

可以看出只要设置的圆角半径小于div的长宽,就是一个小圆角的形状。

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outside{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 50px auto;

            position: relative;

            border-radius: 14px;
        }
        .box1{
            width: 28px;
            height: 28px;
            background-color: red;
            color: #fff;
            text-align: center;
            line-height: 28px;

            position: absolute;
            right: -14px;
            top: -14px;

            border-radius: 14px;
        }
    </style>
</head>
<body>
    <div class="outside">
        <div class="box1">5</div>
    </div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 盒模型的实际尺寸

    好了,从上图来看,已经绘画除了三个正方形了。下面继续看看增加一下边框border看看。

    Devops海洋的渔夫
  • jqueryUI 设置数值的滑动条

    可以从这个方法中获取到了小红块的拖动偏移量left,那么只要通过这个left进行计算,将计算的值赋值给右边的数字之中。

    Devops海洋的渔夫
  • CSS3圆角、opacity 透明度、rgba 背景色设置

    设置某一个角的圆角,比如设置左上角的圆角: border-top-left-radius:30px 60px;

    Devops海洋的渔夫
  • css的position定位详解

    iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

    十月梦想
  • margin-top属性

    这个属性对于不可替换的 inline 标签没有效果,比如 <tt> 或者 <span>。

    Html5知典
  • padding-left 属性

    padding-left 该属性用于设置标签的左部填充区域的高度,负值无效。

    Html5知典
  • 前端知识点系列二:CSS

    无论是哪种盒子模型,子元素相对于父元素content定位。 改变盒子模型的属性为 box-sizing: border-box/content-box;。

    娜姐
  • SpringBoot-10-之初阶整合篇(下)

    张风捷特烈
  • padding-bottom 属性

    padding-botom 该属性用于设置标签的底部填充区域的高度,负值无效。

    Html5知典
  • 使用ValineAdmin完善评论系统

    在更换主题后的这一段时间里,博客运行良好,内容我也在不断完善,评论自然是继承原来的 Valine 也运行正常,但是,其实从上个主题开始,我就没有配置邮件的评论系...

    ZONGLYN

扫码关注云+社区

领取腾讯云代金券