CSS3定位和浮動(dòng)詳解

2024-07-11 08:35:42

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

本文為大家分享CSS3定位和浮動(dòng)的基礎(chǔ)概念，與使用方法，供大家參考，具體內(nèi)容如下

一、定位

1、 css定位：

改變?cè)卦陧?yè)面上的位置

2、 css定位機(jī)制：

普通流：

浮動(dòng)：

絕對(duì)布局：

3、 css定位的屬性:

position 把元素放在一個(gè)靜態(tài)的，相對(duì)的，絕對(duì)的，或者固定的位置中
top/left/right/botom 元素向上/左/右/下的偏移量
overflow 設(shè)置元素溢出其區(qū)域發(fā)生的事情
clip 設(shè)置元素顯示的形狀
vertical-align 設(shè)置元素顯示的對(duì)其方式
z-index 設(shè)置元素的堆疊順序/用來(lái)設(shè)置元素的堆疊順序，越大越在上方/

position的屬性
static 靜態(tài)的（默認(rèn)）
relative 相對(duì)布局（默認(rèn)的）
absolute 絕對(duì)布局（和其他的標(biāo)簽無(wú)關(guān)聯(lián)）
fixed 固定的（不會(huì)隨著頁(yè)面的滾動(dòng)而動(dòng)）

實(shí)例代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

<body>
    <div id="position1"></div>
    <div id="position2"></div>
    <script>
        for (var i=0;i<100;i++){
            document.write(i+"<br/>")
        }
    </script>
</body>

#position1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: 20px;
    top: 20px;
    /*用來(lái)設(shè)置元素的堆疊順序，越大越在上方*/
    z-index: 2;
}#position2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    left: 30px;
    top: 10px;
    z-index: 1;
}