CSS3-- 层模型

最新推荐文章于 2021-07-20 17:06:48 发布

吕海青

最新推荐文章于 2021-07-20 17:06:48 发布

阅读量174

点赞数

分类专栏：前端文章标签： javascript jquery css

本文链接：https://blog.csdn.net/qq_44659826/article/details/108086445

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

层模型有三种形式：相对定位、绝对定位、固定定位。

层模型-绝对定位

绝对定位有以下特点：

绝对定位以浏览器左上角为基准设置位置
当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置；
当父盒子设置定位，子盒子以父盒子左上角为基准设置位置
绝对定位不占空间位置（类似于浮动）

<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      div {
        width: 200px;
        height: 200px;
        border: 5px red solid;
        position: absolute;
        left: 100px; /*相对于浏览器向左偏移100像素*/
        top: 80px; /*相对于浏览器向上偏移80像素*/
      }
    </style>
  </head>
  <body>
    <div></div>
    <!-- 相对于浏览器进行定位 -->
  </body>
</html>

相对定位有以下特点：

相对定位以元素自身的位置为基准设置位置
相对定位要占空间位置
一般子元素设置绝对定位，父元素设置相对定位（子绝父相）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .box1 {
        width: 200px;
        height: 100px;
        position: relative;
        border: 1px dashed green;
      }
      .box2 {
        width: 100px;
        height: 50px;
        position: absolute;
        border: 1px dashed blue;
        top: 20px;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>
copy
效果图：

此处输入图片的描述

固定定位
固定定位表现类似于绝对定位，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。固定定位也不占空间位置，语法为：

position：fixed;
copy
例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p {
        position: fixed;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <p>实验楼</p>
  </body>
</html>

注：复制这段代码到你的编辑器中运行，然后调整你浏览器的视口大小，你会发现，无论怎么变，p 标签所在的位置始终距离浏览器视口的左距离为 100px，上距离为 200px。

介绍 top， bottom， left， right
使用 top， bottom， left 和 right 来精确指定要将定位元素移动到的位置，这些属性的值可以使用逻辑上期望的任何单位：px，cm，%等。也可以使用负值。

z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。用于处理当多个元素重叠的时候，哪些元素设置在其他元素的顶部。特别需要注意的是元素可拥有负的 z-index 属性值，属性值没有单位，只有数字。z-index 仅能在定位元素上奏效（例如 position:absolute;）给个例子：

<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
        position: absolute;
        left: 50px;
        top: 20px;
        z-index: -1;
        background-color: red;
        width: 200px;
        height: 200px;
      }
      .box1 {
        position: absolute;
        left: 80px;
        top: 20px;
        z-index: 2;
        background-color: pink;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <div class="box1"></div>
  </body>
</html>

吕海青

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3-- 层模型

层模型有三种形式：相对定位、绝对定位、固定定位。层模型-绝对定位绝对定位有以下特点：绝对定位以浏览器左上角为基准设置位置当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置；当父盒子设置定位，子盒子以父盒子左上角为基准设置位置绝对定位不占空间位置（类似于浮动）<html> <head> <meta charset="UTF-8" /> <title></title> &.
复制链接

扫一扫