CSS position overflow float 属性 详解

position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况:

position在w3school的可能取值:

描述
absolute

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

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

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

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

relative

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

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。
 
我们先看static:“默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)”
 
先看看什么事“正常的流”:一句话来概括:“元素的位置由元素在 (X)HTML 中的位置决定”。
要很好的理解上面这句话,可以用排除法。CSS的定位机制有3种:普通流、浮动(float:left/right/none)和定位 (position:static/relative/absolute/)。
 
普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。
 
那我们通过static看看所谓的“正常流”的位置:

测试代码如下:

<html>
<head>
    <style>
        #filp
        {
            width:100%;
            position: static;
            top:110px;
            font-size: 50px;
            line-height: 1px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <h2 id="glow">lighy</h2>
        <h2 id="blur">blure</h2>
        <div id="div2">
            <h2 id="shadow">shadow</h2>
            <h2 id="filp">Flip===</h2>
            <h2 id="dropshadow">shshddddd</h2>
            <h2 id="wave">wavessss</h2>
        </div>
    </div>
</body>
</html>

显示效果如下:

从上图可以看出,”filp===“在正常流中的位置,就是其在html文档中从上到下,从左到右顺序位置;

 

接下来看看absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

修改代码中

#filp
{
width:100%;
position: absolute;
top:1px;
font-size: 50px;
line-height: 1px;
}

 

元素跑到左上角了,不是说”static 定位以外的第一个父元素进行定位“吗?应该是div=”div2“才是第一个父元素啊?fip===应该在blur下面才对啊!

后来查了另外一种解释:”absolute定位在其第一个absolute 或 relative的父元素,否则定位到body元素处“。这下就能解释为何跑到左上角去了!

需要注意一下,flip===离开后,其下面的元素上移,占据了其原来位置,这就是所谓”脱离正常流“,脱离了流,其流中位置自然就不被保留!

 

下面看看fixed:

改代码如下:

<html>
<head>
    <style>
        #div1
        {
            float:right;
        }
        #filp
        {
            width:100%;
            position: fixed;
            top:1px;
            left: 20px;
            font-size: 50px;
            line-height: 1px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <h2 id="glow">lighy</h2>
        <h2 id="blur">blure</h2>
        <div id="div2">
            <h2 id="shadow">shadow</h2>
            <h2 id="filp">Flip===</h2>
            <h2 id="dropshadow">shshddddd</h2>
            <h2 id="wave">wavessss</h2>
        </div>
    </div>
</body>
</html>

 

其他元素都float到窗口右侧了,flip===在浏览器的左上角,这就是”相对于浏览器窗口进行定位“的位置,注意它是脱离正常流的!

我们再看看relative:

首先代码改成如下:

<head>
    <style>
        #filp
        {
            width:100%;
            position: relative;
            top:200px;
            left:200px;
            font-size: 50px;
            line-height: 1px;

        }
    </style>
</head>

从上图可以看出,这个flip===跑到右下角,shadow下面有一行空行!那是filp===原来的位置;

”生成相对定位的元素,相对于其正常位置进行定位“,这里所谓正常位置就是”原来正常流中的位置“,以此位置为原点top  left偏移!!

 

float:

上面float:right;可以看出,float:right是其浮动至窗口(通常是其父元素(默认为body文本区域)的左右边框)右侧,其左侧可以有其他块元素,假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。

 

overflow:

说明:该属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,内容如果超出就会出现滚动条。

可能的值

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

scroll:

修改js代码:

<head>
    <style>
        #div1
        {
            overflow: scroll;
            width:300px;
            height:300px;
        }
        #filp
        {
            position: relative;
            top:200px;
            left:200px;
            font-size: 50px;
            line-height: 1px;
        }
    </style>
</head>

上图是一个width:300px; height:300px;的窗口,右边和下面有scroll bar(苹果电脑看不到滚动条,截图效果不好,发挥发挥想象力!),来拉动可以看到被隐藏的内容:

visible:

先改代码如下:

<head>
    <style>
        #div1
        {
            overflow: visible;
            width:300px;
            height:300px;
        }
        #filp
        {
            position: relative;
            top:200px;
            left:200px;
            font-size: 50px;
            line-height: 1px;
        }
    </style>
</head>

visible就是显示超出部分的内容,如上图没有scroll bar 一览无余!

其余属性字面就很容易理解,不赘述了。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。