深入理解css之 —— absolute定位

程序员文章站 2022-03-29 16:05:10

...

深入理解css之 —— absolute定位

工欲善其事，必先利其器。
前端开发css是一门利器，以前写了很多css样式和布局，用到了很多css技巧，但是很多时候不能熟练并且准确无误运用到业务中，所以我会在后面“深入理解css”系列中做详细系统总结；

这一篇主要总结一下position属性：
- absolute绝对定位
- relative相对定位

position这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

absolute绝对定位；

absolute具有两种特性：破坏性，包裹性

破坏性

包裹性

absolute的应用：

1 、icon绝对定位

">       .icon{
        background: yellow;
        position: absolute;
        margin: -16px 0 0 2px;
       }
    </style>
</head>
<body>
     <span>我是icon的邻元素</span>
     <span class="icon">icon</span>
</body>

深入理解css之 —— absolute定位

2、居中显示

<body>
     <div style="height: 200px"></div>
    <div class="parent">
      &nbsp
      <span class="icon">icon</span>
    </div>
</body>
<style type="text/css">
       .icon{
        background: yellow;
        width: 100px;
        position: absolute;
        margin-left: -50px;
       }
       .parent{
        width: 500px;
        margin: 0 auto;
        background: #ccc;
        text-align: center;
       }
</style>