CSS3快速入门：六、定位

最新推荐文章于 2024-07-18 20:08:49 发布

嵩華想睡觉

最新推荐文章于 2024-07-18 20:08:49 发布

阅读量575

点赞数 5

分类专栏： CSS 文章标签： css 相对定位绝对定位固定定位 z-index

本文链接：https://blog.csdn.net/xfjssaw/article/details/115741693

版权

CSS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

定位

CSS系列文章目录

文章目录

定位

ralative相对定位

生成相对定位的元素，通过 top、bottom、left、right 相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。

将元素 position 属性设置为 relative 之后，再通过 top，bottom，left，right 属性对其进行相对于原来位置的偏移；
元素偏移之后，它本来在默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位；
该元素偏移之后，可能存在覆盖其他元素的情况（可以使用 z-index属性显示层级有限级别）。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ralative相对定位</title>
    <style>
      div{
        width:200px;
        height: 200px;
        border: 1px solid black;
      }
      #div1{
        background: #ffc4cc;
        position: relative;
        left: 100px;
      }
      #div2{
        background: #4db1ff;
      }
      #div3{
        background: #ff24dd;
        position: relative;
        right: 100px;
        bottom: 100px;
      }
    </style>
</head>
<body>
    <div id="div1">第一个div块</div>
    <div id="div2">第二个div块</div>
    <div id="div3">第三个div块</div>
</body>
</html>

网页显示如下：
在这里插入图片描述

absolute绝对定位

生成绝对定位的元素，不再以自己原来的位置定位，而是以网页的body左上角为定位基准。

绝对定位的元素脱离了文档流，普通流中其他元素的布局就像绝对元素不存在一样；
绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于 body；
绝对定位的框可以覆盖页面的其他元素。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute绝对定位</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        #div{
            background: #ffc4cc;
            position: relative;
        }

        #div2 {
            background: #4db1ff;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        #div3 {
            background: #ff24dd;
            position: absolute;
            right: 100px;
            bottom: 100px;
        }
    </style>
</head>
<body>
  <div id="div">
    <div id="div1">第一个div块</div>
    <div id="div2">第二个div块</div>
  </div>
  <div id="div3">第三个div块</div>

</body>
</html>

网页显示如下：
在这里插入图片描述

fixed固定定位

本质上是一种绝对定位，不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，且元素的位置在屏幕滚动时不会发生变化。
代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed固定定位</title>
    <style>
      p{
        margin-bottom: 60px;
      }
      #span{
        width: 50px;
        line-height: 30px;
        position: fixed;
        right: 5px;
        bottom: 50px;
        border: 1px solid black;
        background: #4db1ff;
        color: aliceblue;
        border-radius: 5px;
      }
    </style>
</head>
<body>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <span id="span">标&emsp;签</span>
</body>
</html>

网页显示如下：
在这里插入图片描述

z-index图层

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

元素可拥有负的 z-index 属性值；
z-index 仅能在定位元素上奏效;
z-index数值越大，层叠等级越高。
代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index属性</title>
    <style>
        #div1 {
            background: #ffc4cc;
            position: relative;
            width: 200px;
            height: 200px;
            z-index: 1;
        }
        #div2 {
            background: #4db1ff;
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;
            z-index: 3;
        }
        #div3 {
            background: #ff24dd;
            position: absolute;
            left:50px;
            top:50px;
            width: 200px;
            height: 200px;
            z-index: 2;
        }
    </style>
</head>
<body>
  <div id="div">
      <div id="div1">第一个div块</div>
      <div id="div2">第二个div块</div>
      <div id="div3">第三个div块</div>
  </div>
</body>
</html>

网页显示如下：
在这里插入图片描述

opcity透明度

opcity属性可以调整透明度，取值范围在0—1之间，当它为0时代表完全透明，为1代表不透明。含有opcity属性的元素层级会比其他元素的层级高，这时z-index不起作用，此时给其他元素加上position属性，再给元素附加z-index就可以起作用了。opcity改变透明度时，文字的透明度也会被一起改变，而rgba()改变透明度的时候，不会改变文字的透明度。
如图：
在这里插入图片描述