CSS -- 定位篇

作者: NeilShao | 来源:发表于2019-12-19 14:48 被阅读0次

CSS -- 定位

CSS中最重要的应该就是布局和定位, 也就是display和position两个属性。
布局篇在这里

讲布局之前, 先说一下CSS的框模型Box Model, 它规定了元素框处理 元素内容,内边距,边框和外边距的方式

框模型

Box Model

外边距合并

外边距合并意思就是当两个垂直的外边距相遇时,会合并成一个外边距,合并之后外边距的高度是两个外边距中较大的一个。

外边距合并1

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。

外边距合并2

文档流

元素按照HTML中的位置顺序元素,块元素(block)独占一行,内联元素(inline),不独占一行

定位

CSS的定位主要是靠position这个属性,它有以下五种选择

  • static
  • relative
  • fixed
  • absolute
  • sticky

static - 静态定位

元素默认的position属性,浏览器会根据源码的顺序,决定每个元素的位置,就是正常的文档流。 每个区块占据自己的位置, 不会发生重叠(同级区块)。并且此时left,right,top,bottom的属性是无效的,元素的位置由浏览器自主决定。

static.jpg

relative - 相对定位

相对定位是在静态定位的基础上进行偏移。偏移是根据left,right,top,bottom四个属性决定方向和距离。


relative.jpg

此时, 元素依然处于文档流中,而且,相对定位是不会影响文档流的。
举个例子,

<style  type="text/css">
    .parent {
        border: 2px solid red;
    }

    .parent div {
        height: 100px;
        width: 100px;
        background-color: red;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .div2 {
        position: relative;
        background-color: orange !important;
        top: 200px;
        left: 20px;
    }
</style>
<div class="parent">
    <div class="div1">test1</div>
    <div class="div2">test2</div>
    <div class="div3">test3</div>
</div>
relative-demo.png

div2 的位置虽然有偏移,但是父元素并没有受其影响,就是说它在文档流中的位置还是和静态布局的位置一样,只是显示的时候有偏移。

absolute-绝对定位

绝对定位是根据第一个定位不为static的父元素进行偏移。如果没有不为static的父元素, 则根据整个网页的根元素HTML进行偏移,偏移的方向和距离根据left,right,top,bottom四个属性决定。绝对定位不会影响页面中的其他元素

就如刚才的例子,如果把div2的定位设为绝对定位,则文档流中只有div1和div3。


absolute-demo.png

fixed-固定定位

固定定位是类似于绝对定位, 但是是相对于浏览器窗口定位, 而且不会受到滚动条的影响。
Example

sticky-粘性定位

粘性定位可以说是相对定位和固定定位的组合,就是可以自动切换相对定位/固定定位。它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到粘性定位的要求时(比如top:10px),这时其效果相当于fixed定位,固定到适当位置。

使用条件:

  • 必须搭配top、bottom、left、right其一使用, 否则相当于相对定位
  • 父元素的overflow不能为hidden或者overflow
  • 父元素的高度不能低于sticky元素的高度
  • sticky元素仅在其父元素内生效
<!DOCTYPE html>
<html>

<head>
    <title>position</title>
    <style type="text/css">
        .stacking-slide {
            height: 100vh;
            width: 100%;
            position: sticky;
            top: 0;
        }

        .stacking-slide:nth-child(1) {
            background-color: #ffc2c2;
        }

        .stacking-slide:nth-child(2) {
            background-color: #ffe0c2;
        }

        .stacking-slide:nth-child(3) {
            background-color: #ffffc2;
        }

        .stacking-slide:nth-child(4) {
            background-color: #e0ffc2;
        }

        .stacking-slide:nth-child(5) {
            background-color: #c2ffc2;
        }
    </style>
</head>

<body>

    <div class="stacking-slide">
        <h2>Section 1</h2>
    </div>
    <div class="stacking-slide">
        <h2>Section 2</h2>
    </div>
    <div class="stacking-slide">
        <h2>Section 3</h2>
    </div>
    <div class="stacking-slide">
        <h2>Section 4</h2>
    </div>
    <div class="stacking-slide">
        <h2>Section 5</h2>
    </div>

</body>

</html>

相关文章

  • 图片精灵

    div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css ...

  • CSS -- 定位篇

    CSS -- 定位 CSS中最重要的应该就是布局和定位, 也就是display和position两个属性。布局篇在...

  • CSS -- 布局篇

    CSS -- 布局 CSS中最重要的应该就是布局和定位, 也就是display和position两个属性定位篇在这...

  • css定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • css 定位 浮动

    定位 1 . css 定位:改变元素在页面上的位置2 . css 定位机制:普通流浮动绝对布局3 . css 定位...

  • css定位篇-position

    html中position定位有: static (默认的定位方式,文档流) relative (相对定位) ab...

  • css定位篇-display

    我们在许多时候,都会看到display这个东东,它对于布局的影响还是挺大的。需要学习下: 1 、 block 块级...

  • CSS定位

    CSS定位(Positioning)允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...

网友评论

    本文标题:CSS -- 定位篇

    本文链接:https://www.haomeiwen.com/subject/sebmnctx.html