19.CSS-定位（上）

最新推荐文章于 2024-10-25 13:24:23 发布

原创最新推荐文章于 2024-10-25 13:24:23 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #css3

笔记同时被 2 个专栏收录

60 篇文章

订阅专栏

css

31 篇文章

订阅专栏

本文详细介绍了CSS中的定位流，包括相对定位和绝对定位的概念、注意事项及其应用场景。相对定位不脱离标准流，常用于元素微调；绝对定位则脱离标准流，通常与相对定位结合使用，实现子元素相对于父元素的精确定位。文章通过实例展示了如何利用相对和绝对定位解决布局问题，以及如何实现元素的水平居中。

定位

定位流的分类

1.相对定位

什么是相对定位？

相对定位就是相对于自己以前在标准流中的位置来移动

注意点

相对定位是不脱离标准流的，会继续在标准流中占据一份空间；
需要配合其他的属性一起使用，相对于自己以前在标准流中的位置来移动；

position: relative;
top: 20px;
right: ;
bottom: ;
left: 20px;

在相对定位中同一个方向上的定位属性只能使用一个；
由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素的；
由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性的时候，会影响到标准流的布局

应用场景

用于对元素进行微调；
例如：当input和img的顶部对不齐时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>75-定位流</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    input{
      width: 200px;
      height: 50px;
    }
    img{
      width: 100px;
      height: 50px;
      position: relative;
      top: 20px;
    }
  </style>
</head>
<body>
<input type="text">
<img src="images/vcode.jpg">
</body>
</html>

配合绝对定位来使用。

2.绝对定位

什么是绝对定位？

就是相对于body来定位（不一定是相对于body）
规律：

默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。
如果一个绝对定位的元素有祖先元素，并且祖先元素，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。
（只要是这个绝对定位元素的祖先元素都可以；定位流指的是绝对定位、相对定位、固定定位，只有静态定位不行）
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个元素为参考点（就近原则）

注意点

绝对定位的元素是脱离标准流的；
绝对定位的元素是不区分块级元素/行内元素/行内块级元素的。
如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的高度和宽度作为参考点的；
一个绝对定位的元素会忽略祖先元素的padding。

应用场景

在企业开发中，不会单独使用相对定位或者绝对定位。
单独使用相对定位的弊端：
相对定位不会脱离标准流，会继续在标准流当中占用一份空间，所以不利于布局界面。
单独使用绝对定位的弊端：
默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化。
绝对定位和相对定位结合使用：子绝父相
子元素用绝对定位，父元素用相对定位
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>79-绝对定位-子绝父相</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    ul{
      list-style: none;
      width: 800px;
      height: 50px;
      margin: 0 auto;
      margin-top: 100px;
    }
    ul li{
      float: left;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #cccccc;
    }
    ul li:nth-of-type(4){
      background-color: yellow;
      position: relative;
    }
    ul li img{
      /*单独使用相对定位的弊端：
        相对定位不会脱离标准流，会继续在标准流当中占用一份空间，所以不利于布局界面。*/
      /*position: relative;
      left: -42px;
      top: -18px;*/
      /*单独使用绝对定位的弊端：
      默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化*/
      /*position: absolute;
      left: 526px;
      top: 90px;*/
      /*绝对定位和相对定位结合使用：子绝父相
      子元素用绝对定位，父元素用相对定位*/
      position: absolute;
      left: 40px;
      top: -10px;
    }
  </style>
</head>
<body>
<ul>
  <li>服装城</li>
  <li>美妆馆</li>
  <li>京东超市</li>
  <li>全球购
    <img src="images/hot.png">
  </li>
  <li>闪购</li>
  <li>团购</li>
  <li>拍卖</li>
  <li>金融</li>
</ul>
</body>
</html>

如何让绝对定位的元素水平居中
只需要设置绝对定位的元素的left：50%；
然后在设置绝对定位元素的margin-left：—元素宽度的一半px；
例如：

ul li img{
      /*单独使用相对定位的弊端：
        相对定位不会脱离标准流，会继续在标准流当中占用一份空间，所以不利于布局界面。*/
      /*position: relative;
      left: -42px;
      top: -18px;*/
      /*单独使用绝对定位的弊端：
      默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化*/
      /*position: absolute;
      left: 526px;
      top: 90px;*/
      /*绝对定位和相对定位结合使用：子绝父相
      子元素用绝对定位，父元素用相对定位*/
      position: absolute;
      /*left: 40px;*/
      left: 50%;
      margin-left: -12px;
      top: -10px;
    }