CSS-position: absolute绝对定位

王十四兄

已于 2023-01-02 14:23:54 修改

阅读量521

点赞数 1

分类专栏： css 文章标签：前端 html css web css3

于 2022-11-15 22:30:43 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127875584

版权

css 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

绝对定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: absolute;
        /* left: 100px;
         top: 100px; */
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: yellowgreen;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: orange;
        /*开启box4的相对定位*/
        /* position: relative; */
      }
      s1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box5">
      <div class="box4">
        <div class="box2"></div>
      </div>
    </div>
    <div class="box3"></div>
    <span class="s1">我是一个span</span>
  </body>
</html>

请添加图片描述

1. 说明

当 position 属性设置为 absolute 时，则开启了元素的绝对定位

开启绝对定位，会使元素脱离文档流
开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的

一般情况开了子元素的绝对定位都会开启父元素的相对定位
- 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
绝对定位会使元素提升一个层级
绝对定位会改变元素的性质，
- 内联元素会变成块元素
- 块元素的宽度和高度默认都被内容撑开