css定位六

最新推荐文章于 2024-06-13 21:20:19 发布

米白蓝

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量69

点赞数

分类专栏： HTML+css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_50563868/article/details/123374061

版权

HTML+css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性2</title>
  <style>
    body {
      font-size: 50px;
    }
    .box, .box2 {
      width: 100px;
      height: 100px;
      background-color: #a45;
    }
    .box2 {
      position: fixed;
      top: 0;
      right: 0;
    }
    .box1 {
      /* position: relative; */
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100px;
      height: 100px;
      background-color: #a12;

    }
    .box2 {
      background-color: #a90;
    }
    .box3 {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: #d82;
    }
    .box4 {
      
      width: 200px;
      height: 200px;
      background-color: #c29;
    }
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box3">
    3
    <div class="box4">
      4
      <div class="box1">2</div>
    </div>
  </div>
  <div class="box2">3</div>
</body>
</html>

position定位属性

相对定位：relative：不设置偏移量，不会发生任何变化、参照与元素在文档流中的位置进行定位的、会提升元素的层级、不会使元素脱离文档流、不会改变元素的性质（块级元素、行内元素）；
绝对定位：absolute：不设置偏移量，元素位置不会改变、元素会脱离、会改变元素的性质，行内变块，块的高宽被内容撑开、提高层级；
包含块（containing clock）：正常情况下，包含块就是离当前最近的祖先块元素，也就是父元素；绝对定位的包含块：就是离它最近的开启了定位的祖先元素，都没有开启定位，则相对于根元素就是它的包含块；html（根元素、初始包含块）；
固定定位：fixed：特殊的绝对定位，和绝对定位的特点相似，唯一不同的是，固定定位，永远参照与浏览器的视口进行定位；
粘性定位：sticky：兼容性不好；
当我们开启绝对定位后：水平布局的等式就要添加left和right两个值，当发生过渡约束，如果没有存在auto，则会自动调整right的值使等式满足，如果有auto，则调整auto的值；可以设置auto的有margin、width、right、left；left、right没有写的情况下是auto；
垂直方向布局的等式也必须满足：top+margin-top+border-top+padding-top+hight+padding-bottom+border-bottom+margin-bottom+bottom=包含块的高度；
对于开启了定位的元素，可以使用z-index来提高层级；如果元素层级一样，则会优先显示结构靠下的；祖先元素的层级再高，也不会盖住后代元素；
background-clip：将背景颜色设置到内容区，边框和内边距不在有背景颜色；值为content-box；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css定位六

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性2</tit
复制链接

扫一扫