CSS3定位和浮動詳解

2024-07-11 08:34:26

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

一、定位

1、 css定位：

改變元素在頁面上的位置

2、 css定位機制：

普通流：

浮動：

絕對布局：

3、 css定位的屬性:

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

position的屬性
static 靜態(tài)的（默認）
relative 相對布局（默認的）
absolute 絕對布局（和其他的標簽無關(guān)聯(lián)）
fixed 固定的（不會隨著頁面的滾動而動）

實例代碼：

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;
    /*用來設(shè)置元素的堆疊順序，越大越在上方*/
    z-index: 2;
}#position2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    left: 30px;
    top: 10px;
    z-index: 1;
}