首页 > > 网页制作 > css >

css的position属性

2019-11-25 16:07:58来源：博客园阅读 ()

css的position属性

Html css position属性

position属性把元素放置在一个静态的,相对的,绝对的,或则固定的位置中.

1,第一个属性absolute,绝对定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
    </head>
    <style>
    /*绝对定位*/
 
    div.pos_abs{
        position:absolute;
        left:100px;
        top:150px;
        width:200px;
        height:200px;
        background-color:black;
        color:white;
        text-align:center;
    }
    div{
        border:2px solid black;
    }
    </style>
    <body>
        <div class="pos_abs">
            这是一个绝对定位的盒子
        </div>
        <div>
            通过绝对定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离页面左侧100px,距离页面顶部150px.
        </div>
    </body>
</html>

我们可以改一下第二个div class="pos_abs"的width:500px和height:500px,会发现绝对定位盒子的位置始终不会改变,会在第二个div的内部.

2,第二个属性fixed:固定定位元素,相对于浏览器窗口进行定位

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
    </head>
    <style>
    /*定位*/
 
    div.pos_abs{
 
        /*下面是一个基于static的绝对定位*/
        /*position:absolute;*/
 
        /*下面是一个基于浏览器窗口的固定定位*/
        position:fixed;
        left:100px;
        top:150px;
        width:200px;
        height:200px;
        background-color:black;
        color:white;
        text-align:center;
    }
    div{
        border:2px solid black;
        width:500px;
        height:500px;
    }
    </style>
    <body>
        <div class="pos_abs">
            这是一个固定定位的盒子
        </div>
        <div>
            通过fixed固定定位,元素可以放置在页面上的任何位置,下面的黑色盒子距离浏览器窗口左侧100px,距离浏览器窗口顶部150px.当我们滚动页面时,黑盒子和浏览器窗口的相对位置不会发生任何变化.
        </div>
        <div>此盒子用来撑开页面高度</div>
        <div>此盒子用来撑开页面高度</div>
    </body>
</html>

用两个盒子撑开页面高度,当我们使页面向下滚动的时候,会发现fixed固定的黑盒子,始终以浏览器窗口为参照,固定在页面上.

3,relative 生成相对定位的元素，相对于其正常位置进行定位。

下面我只给css样式,代码不在重复写了

div.pos_abs{
 
        /*下面是一个基于static的绝对定位*/
        /*position:absolute;*/
 
        /*下面是一个基于浏览器窗口的绝对定位*/
        /*position:fixed;
        left:100px;
        top:150px;*/
 
        /*下面是一个相对定位*/
        position:relative;
        left:-20px;
        top:-10px;
        width:200px;
        height:200px;
        background-color:black;
        color:white;
        text-align:center;

在浏览器中打开可以看到,黑色盒子的一部分已经到了页面外部,盒子相对于它原来该有的位置进行位置的调整.

4,另外还有两个属性static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit:规定应该从父元素继承 position 属性的值(static和inherit不是很常用)

5,一个常用的组合"子绝父相",子盒子采用绝对定位(absolute),父盒子用相对定位(relative),将子盒跟父盒子的相对位置绑定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
    </head>
    <style>
    /*定位*/
 
    div.pos_relative{
 
        /*下面是一个基于static的绝对定位*/
        /*position:absolute;*/
 
        /*下面是一个基于浏览器窗口的绝对定位*/
        /*position:fixed;
        left:100px;
        top:150px;*/
 
        /*下面是一个相对定位*/
        position:relative;
        left:20px;
        top:10px;
        width:500px;
        height:500px;
        background-color:black;
        color:white;
        text-align:center;
    }
    div.pos_abs{
        position:absolute;
        left:50px;
        top:70px;
        border:2px solid black;
        width:200px;
        height:200px;
        background: white;
        color:black;
    }
    div{
        width:500;
        height:500px;
        border:2px solid black;
    }
    </style>
    <body>
        <div class="pos_relative">
            这是一个定位的父盒子
            <div class="pos_abs">
            (子盒子)子盒子会跟着父盒子一起变动,通过子绝父相,将两盒子的相对位置绑定.
            </div>
        </div>
        
        <div>此盒子用来撑开页面高度</div>
        <div>此盒子用来撑开页面高度</div>
    </body>
</html>