免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
CSS步局之position精講(有示例夠清晰)

position

為了制作更多復(fù)雜的布局,我們需要討論下 position 屬性。它有一大堆的值,名字還都特抽象,別提有多難記了。讓我們先一個個的過一遍,不過你最好還是把這頁放到書簽里。

static

.static {  position: static;}
<div class="static">

static 是默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”,一個 position 屬性被設(shè)置為其他值的元素表示它會被“positioned”。

</div>

relative

.relative1 {  position: relative;}.relative2 {  position: relative;  top: -20px;  left: 20px;  background-color: white;  width: 500px;}
<div class="relative1">

relative 表現(xiàn)的和 static 一樣,除非你添加了一些額外的屬性。

</div>
<div class="relative2">

在一個相對定位(position屬性的值為relative)的元素上設(shè)置 top 、 rightbottomleft 屬性會使其偏離其正常位置。其他的元素則不會調(diào)整位置來彌補它偏離后剩下的空隙。

</div>

fixed

<div class="fixed">

Hello!暫時不要太關(guān)注我哦。

</div>

一個固定定位(position屬性的值為fixed)元素會相對于視窗來定位,這意味著即便頁面滾動,它還是會停留在相同的位置。和 relative 一樣, top 、 right 、 bottomleft 屬性都可用。

我相信你已經(jīng)注意到頁面右下角的固定定位元素。你現(xiàn)在可以仔細看看它,這里有它所使用的CSS:

.fixed {  position: fixed;  bottom: 0;  right: 0;  width: 200px;  background-color: white;}

一個固定定位元素不會保留它原本在頁面應(yīng)有的空隙。

令人驚訝地是移動瀏覽器對 fixed 的支持很差。這里有相應(yīng)的解決方案.

absolute

absolute 是最棘手的position值。 absolutefixed 的表現(xiàn)類似,除了它不是相對于視窗而是相對于最近的“positioned”祖先元素。如果絕對定位(position屬性的值為absolute)的元素沒有“positioned”祖先元素,那么它是相對于文檔的 body 元素,并且它會隨著頁面滾動而移動。記住一個“positioned”元素是指p osition 值不是 static 的元素。

這里有一個簡單的例子:

.relative {  position: relative;  width: 600px;  height: 400px;}.absolute {  position: absolute;  top: 120px;  right: 0;  width: 300px;  height: 200px;}
<div class="relative">

這個元素是相對定位的。如果它是 position: static; ,那么它的絕對定位子元素會跳過它直接相對于body元素定位。

<div class="absolute">

這個元素是絕對定位的。它相對于它的父元素定位。

</div>
</div>

這部分比較難理解,但它是創(chuàng)造優(yōu)秀布局所必需的知識。下一頁我們會使用 position 做更具體的例子。

7 / 19         
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
如何精確定位固定大小的div在網(wǎng)頁的中間位置并且不隨分辨率的設(shè)置改變(位置大小都不變)
深究CSS定位position的常用技法
前端基礎(chǔ)教程 CSS丨css定位屬性的使用
解讀CSS中position屬性四大可選值用法
詳解CSS的相對定位和絕對定位
CSS 定位詳解
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服