CSS常用的定位布局

最新推荐文章于 2023-05-26 23:12:28 发布

漆黑中的空白

最新推荐文章于 2023-05-26 23:12:28 发布

阅读量129

点赞数

分类专栏： css布局文章标签： html5 html css css3 前端

本文链接：https://blog.csdn.net/a2733059233/article/details/120056155

版权

css布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.静态布局

这个没什么好说的，没有设置其他定位，创建的块级元素，默认的就是静态布局——position: static; 在文档流/标准流中。

2.相对定位

相对定位就是相对于自己以前在标准流中的位置来移动 ——position: relative; 在文档/标准流中。相对定位，移动了位置会在原来的位置上留下空间，不会在移动后的位置留下空间，可以利用top,right,bottom,left 来进行移动。

<!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>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .div1,.div2,.div3{
      width: 200px;
      height: 200px;
    }
    .div1{
      background-color: red;
    }
    .div2{
      background-color: green;
      /* 定位属性 */
      /* 相对定位 */
      position: relative;
      /* 顶部定位 */
      top: 40px;
      /* 右边定位 */
      /* right: 40px; */
      
      /* 左边定位 */
      left: 140px;
    }
    .div3{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"><span>sfgggggggggg</span></div>
  <div class="div3"></div>
</body>
</html>

3.绝对定位

绝对定位就是相对于body来定位——position: absolute; 但是如果祖先元素不是默认定位流是其他定位流，那么就以祖先元素进行定位。绝对定位的元素是脱离标准流，不占据空间的，正因如此，不区分块级元素/行内元素/行内块级元素。

<!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>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .div1,.div2,.div3{
      width: 200px;
      height: 200px;
    }
    .div1{
      background-color: red;
    }
    .div2{
      background-color: green;
      /* 定位属性 */
      /* 相对定位 */
      position:absolute;
      /* 顶部定位 */
      top: 40px;
      /* 右边定位 */
      /* right: 40px; */
    
      /* 左边定位 */
      left: 140px;
    }
    .div3{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"><span>sfgggggggggg</span></div>
  <div class="div3"></div>
</body>
</html>

扩展：子绝父相

相对定位弊端: 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面绝对定位弊端: 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

解决方法：我们可以用子元素绝对定位, 父元素相对定位来进行综合，消除两者的弊端。想要子元素居中，left：50%；top:50%;margin-left和margin-top的负值进行定位.......更多居中方式和讲解，后续再出

4.固定定位

顾名思义，固定定位就是固定这个模块，让这个模块无法跟随屏幕移动——position: fixed;就是你怎么动，他都不会动。固定定位脱离标准流/文档流的，不占据空间，

5.粘滞定位

结合了相对定位（relatrve）和固定定位（fixed）的特性产生的一种特殊定位——position: sticky；这个定位有点奇特，给其的规定是不脱离文档流/标准流，但是到达一定位置就变成fixed布局了，即固定在屏幕上了，可以悬浮在其他元素上面。注意：这个布局一定要top、bottom、left、right 其中的一个或多个设置距离，并且父元素不能overflow:hidden或者overflow:auto属性。

漆黑中的空白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用的定位布局

1.静态布局这个没什么好说的，没有设置其他定位，创建的块级元素，默认的就是静态布局——position: static; 在文档流/标准流中。2.相对定位相对定位就是相对于自己以前在标准流中的位置来移动 ——position: relative; 在文档/标准流中。相对定位，移动了位置会在原来的位置上留下空间，不会在移动后的位置留下空间，可以利用top,right,bottom,left 来进行移动。<!DOCTYPE html><html lang="en">
复制链接

扫一扫