CSS通過設定position定位的三種常用定位

css中可以通過設定為元素設定乙個position屬性值，從而達到將不同的元素顯示在不同的位置，或者固定顯示在某乙個位置，或者顯示在某一層頁面之上。

position的值可以設為relative，absolute，fixed，static。

html**裡定義兩個區塊：

1

<
div 
class
="box"
>
2<
div 
class
="box1"
>
div>
3div
>

1.相對定位：

1

.box

以上**將實現將box以box最初的位置向右移動50px，向下移動10px。

2.絕對定位：

1

.box1

以上**將實現將box1的位置以當前的視口位置的原點為基準位置進行移動相應得距離；

如果將box1的父級設定了relative，那麼box1將會以box的原點進行位移。

1

.box 
4.box1

3.固定定位：

1

.box

以上**將會將box固定在視窗的距離頂部20px的左側邊緣位置。

使用注意點：

1.絕對定位會使元素脫離文件流，位於定位元素後面的元素將會移動到該元素的位置去填補空白區域；

2.一般情況下，絕對定位都會和ixnagdui相對一起使用；

3.使用fixed和absolute時，一定要認清誰是基準位置。

1

<
div 
class
="aside-cover"
>
2<
div 
class
="cover"
>
3<
div 
class
="aside-left"
>
4<
img 
src="img/batlogox.png"
alt="left"
/>
5div
>
6div
>
7div
>

.cover 

/*第二級子級絕對定位
*/.aside-left 
/*相對定位
*/.aside-left img

通過以上**就可以實現將想要顯示的內容區域顯示在視窗的固定位置。

通過js設定css

firefox等可以使用 var dom document.getelementbyid name dom.setattribute style width 10px height 10px border solid 1px red ie中則必須使用style.csstext var dom doc...

關於 position 的設定

position 用於常見的定位設定，主要包括absolute relative fixed 一 absolute絕對定位相對於瀏覽器視窗左上角移動或static 定位以外的第乙個父元素進行定位。設定完成後它會脫離原來的文件流 一般情況有絕對定位必有相對定位 position absolute le...

CSS 定位position屬性

div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中，即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block，可以讓行內元素...