• 微信号
目录

html笔记

您当前的位置:首页 > 我的笔记 > html笔记>css定位布局-position

css定位布局-position

定位-position

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

属性值

  • static:默认值,没有定位,元素出现在正常的文档流中,这时给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的
  • relative:相对定位
  • absolute:绝对定位
  • fixed:固定定位

相对定位(relative)

生成相对定位的元素他会跟其它的元素一样,出现在文档流中它该出现的位置,可以设置它的水平或垂直偏移量,让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意, 在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。元素的位置通过 "left", "top", "right" 以及"bottom" 属性进行规定

实例

<div class="main"></div>
<style>
    .main{
        position: relative;
        left: 10px;
        top: 2px;
    }
</style>

绝对定位(absolute)

绝对定位使元素的位置与文档流无关,因此不占据空间。 生成绝对定位的元素,相对于 static 定位以外的第一个父元素(body)进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

实例

<div class="main"></div>
<style>
    .main{
        position: absolute;
        left: 10px;
        top: 2px;
    }
</style>

固定定位(fixed)

生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以"bottom" 属性进行规定

实例

<div class="main"></div>
<style>
    .main{
        position: fixed;
        left: 10px;
        top: 2px;
    }
</style>

相对定位和绝对定位

父元素使用相对定位,子元素使用绝对定位后,这样子元素的位置不在浏览器左上角,而是相对于父容器左上角。

实例

<div class="main">
    <div clsss="box">内容</div>
</div>
<style>
    .main{
        position: relative;
    }
    .main .box{
        position: absolute;
        left: 10px;
        top: 2px;
    }
</style>

z-index

当多个元素添加绝对定位,元素将会叠加在一起,使用z-index可以设置元素显示的层次

注意:z-index 仅能在定位元素上奏效(例如 position:absolute;)!;元素可拥有负的 z-index 属性值

说明::一般元素为普通流,普通流的z-index默认为0,脱离了普通流,在普通流之上(定位,浮动)z-index为0-1之间。如果将z-index值设置为大于或者等于1,元素将会在定位或者浮动流之上

实例

<style>
    div{
    width: 400px;
    height: 200px;
    }
    .div1{
    width: 1000px;
    height: 600px;
    background-color: #f00;
    position: relative;
    }
    .div2{
    background-color: #0f0;
    position: absolute;
    z-index: 2;
    }
    .div3{
    background-color: #00f;
    position: absolute;
    z-index: 3;
    }
</style>
<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>