css定位笔记

css定位

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
定位的值以及对应的属性如下表所示：

值	属性
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 left位置添加 20px。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
inherit	规定应该从父元素继承 position 属性的值。
sticky	CSS3新属性，表现类似position:relative和position：fixed的合体，在目标区域在屏幕可见时，他的行为就像position:relative；而当页面滚动超出目标区域，他的行为就像position：fixed。

relative：相对定位

1. 不论其父元素和相邻元素的position是什么，均相对于自身原来的位置来偏移。
2. 不会脱离文档流，其原来的位置依然保留着，不会被文档中其他的元素占用。
3. 原来是行内元素，设置相对定位后，依然是行内元素。
4. 设置了相对定位的块级元素，如果没有设置宽度，其宽度依然是拉伸至父元素宽度的100%。
5. 相对定位应用场景：用于对元素进行微调，配合后面的学习的绝对定位来使用

下面我就用例子来讲解，其他的不多说。

html代码：

    <div class="wraper">
         <div class="box move">1</div>
         <div class="box">2</div>
    </div>

cs代码：

     .wraper {
        width: 250px;
        height: 250px;
        border: 3px solid pink;
    }

    .box {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color:yellowgreen;
    }

定位前效果图：

此刻我们可以对move进行css添加定位

   .move{
        position: relative;
        left: 20px;
    }

上面我们说到，相对定位，其原来的位置依然保留着，不会被文档中其他的元素占用。添加了定位以后我们会发现效果图中第一个div向自身左侧移动了，并且第二个div位置没有变化。

absolute：绝对定位

1. 相对于最近的一个position不为static的父元素来定位，如果没有，则相对于画布或 HTML 元素来定位。
2. 定位后元素本身脱离文档流，位置被其他元素所占据。
3. 设置了绝对定位的行内元素，会转化为块级元素，可以设置宽高。
4. 设置了绝对定位的块级元素，如果没有设置固定宽度，则其宽度不会自动拉伸至父元素的100%，而是由内容和内边距的宽度来决定的。

下面我就用例子来讲解，其他的不多说。

html代码：

    <div class="wraper">
         <div class="box move">1</div>
         <div class="box">2</div>
    </div>

cs代码：

     .wraper {
        width: 250px;
        height: 250px;
        border: 3px solid pink;
    }

    .box {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color:yellowgreen;
    }

定位前效果图：

此刻我们可以对move进行css添加定位，同时给父元素添加相对定位

   .move{
         position: absolute;
        left: 110px;
    }

上面我们说到，绝对定位，定位后元素本身脱离文档流，位置被其他元素所占据。添加了定位以后我们会发现效果图中第一个div向自身左侧移动了，并且第二个div位置跑到了第一个div的位置。

如果父元素没有定位，我们再看向左浮动会发生什么,我们看到第一个div和上个图有明显变化，此时此刻它是相对于整个页面定位的

fixed：固定定位

1. 相对于视图窗口进行定位。
2. 定位后元素本身脱离文档流，位置被其他元素所占据。
3. 元素有原来默认宽度百分之百，变为内容大小。

下面我就用例子来讲解，其他的不多说。

html代码：

    <div class="wraper">
         <div class="box move">1</div>
         <div class="box">2</div>
    </div>

cs代码：

     .wraper {
        width: 250px;
        height: 250px;
        border: 3px solid pink;
    }

    .box {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color:yellowgreen;
    }

定位前效果图：

此刻我们可以对move进行css添加定位，同时给父元素添加相对定位

   .move{
         position: fixed;
         top:200px;
        left: 100px;
    }

上面我们说，固定对定位，定位后元素本身脱离文档流，位置被其他元素所占据。添加了定位以后我们会发现效果图中第一个div向自身左下侧移动了，并且第二个div位置跑到了第一个div的位置。如果此时缩小页面，第一个div不会随滚动条滚动而滚动， 固定定位一定要写宽和高（除非有内容撑开盒子） 。

笔记

位置属性 position

• static 静态位置属性

  • 元素没有脱离文档流。

• 相对定位 relative

  • 相对自身起始位置进行定位； 自身脱离了文档流
  • 定位后原来的位置不被其他元素所占据
  • 应用：适合用于元素微调

• 绝对定位 abosult

  • 相对祖籍元素中具有 position 属性的元素,且值不是static的元素，进行绝对定位，如果所有祖籍都没改属性，那么久相对于body进行绝对定位
  • 定位后元素本身脱离文档流，位置被其他元素所占据，元素大小有默认百分之百变为内容大小（默认无外边距）

• 固定定位 fixed

  • 相对于视图窗口进行定位；
  • 元素自身脱离文档流
  • 原来的位置被其他元素所占据
  • 元素有原来默认宽度百分之百；变为内容大小。