定位vs浮动

  1. 可以让某个元素自由的在某个盒子内移动,并且能压住其他的盒子。
  2. 让某个元素固定在页面某个位置

浮动可以让多个块级盒子没有缝隙的并排显示,经常用于横向布局盒子。

定位则是可以让某个元素在某个盒子里面自由移动,并且可以压住其他的盒子。

定位的组成

定位= 定位模式 + 偏移。

定位模式

  • static:

    对象遵循常规流。此时4个定位偏移属性不会被应用。(这个静态定位就是按照标准流布局的,没有边偏移)

  • relative:

    对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

  • absolute:

    对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

  • fixed:

    absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

  • center:

    absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)

  • page:

    absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)

  • sticky:

    对象在常态时遵循常规流。它就像是relativefixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

边偏移

top bottom right left .

相对定位 relative

选择器 {position:relative}

相对定位是 移动元素原来的位置 进行偏移

特点:

  1. 参照点是自己原来的位置
  2. 和浮动不一样的是,自己虽然移动了 ,但是还是会按照标准流的位置。(不脱标,继续占标准流位置)
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box1 {
            background-color: pink;
            position: relative;
            top: 25px;
            left: 50px;
        }
    </style>
</head>

<body>
    <div class="box1">
        盒子1
    </div>
    <div>盒子2</div>
</body>

相对定位

绝对定位 absolute

选择器 {position:absolute}

绝对定位是 移动元素祖先元素位置 进行偏移

特点:

  1. 如果父元素没有定位(标准流/浮动的盒子)或者没有父元素,则以浏览器为准定位
  2. 如果祖先元素有定位(绝对,相对,固定),则以最近一级的有定位的祖先为参考点移动位置。
  3. 标准流的位置, 是脱离标准流的。

自绝父相

我们使用定位的时候我们要使用一个口诀,子元素绝对定位,父元素相对定位。

  1. 子元素使用绝对定位的为了不占标准流的位置,
  2. 而父元素使用相对定位一来是限制子元素,
  3. 二来是占用标准流的位子。

结语

假期的第一天

79A59EF56224B22753145CEA8E88BAA2-dfc4efa7ed3d4a6480b9233445c2e872

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2020/12/27/c-s-s--ding-wei-1
最后更新于:  213  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟