真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

html5定位有哪些

html5定位有哪些，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

成都創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)寧陽,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

html5定位有5種：1、絕對定位（absolute）；2、相對定位（relative）；3、固定定位（fixed）；4、粘性定位（sticky）；5、靜態(tài)定位（static）。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

html5中的幾種定位方式

position設(shè)置塊級元素相對于其父塊的位置和相對于它自身應(yīng)該在的位置

1、絕對定位(absolute)

特點(diǎn)：

  • 若沒有父元素，參照物為整個(gè)文檔

  • 默認(rèn)情況下參照物為已經(jīng)做定位的父元素

  • 添加絕對定位的元素，會(huì)脫離整個(gè)布局流，破壞布局空間

絕對定位的元素從文檔流中拖出，使用left、right、top、bottom等屬性相對于其最接近的一個(gè)最有定位設(shè)置的父級元素進(jìn)行絕對定位，如果元素的父級沒有設(shè)置定位屬性，則依據(jù) body 元素左上角作為參考進(jìn)行定位。絕對定位元素可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數(shù)，大的在上面，可以有負(fù)值。

絕對定位的定位方法：如果它的父元素設(shè)置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就會(huì)相對于它的父元素來定位，位置通過left , top ,right ,bottom屬性來規(guī)定，如果它的父元素沒有設(shè)置定位，那么就得看它父元素的父元素是否有設(shè)置定位，如果還是沒有就繼續(xù)向更高層的祖先元素類推，總之它的定位就是相對于設(shè)置了除static定位之外的定位的第一個(gè)祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那么它就會(huì)相對于文檔body來定位（并非相對于瀏覽器窗口，相對于窗口定位的是fixed）。


	
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: absolute;
			top: 50px;
			left: 50px;
		}
	


	One
Two
Three
Four

將class="two"的div定位到距離的頂部和左側(cè)分別50px的位置。會(huì)改變其他元素的布局，不會(huì)在此元素本來位置留下空白。

html5定位有哪些

2、相對定位(relative相當(dāng)于靈魂出竅的場面)

特點(diǎn)：

相對定位元素不可層疊，依據(jù)left、right、top、bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設(shè)計(jì)。


	
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: relative;
			top: 50px;
			left: 50px;
		}
	


	One
	Two
	Three
	Four

將class="two"的div定位到距離它本來位置的頂部和左側(cè)分別50px的位置。不會(huì)改變其他元素的布局，會(huì)在此元素本來位置留下空白。

html5定位有哪些

3、固定定位(fixed)

特點(diǎn)：

固定定位與絕對定位類似，但它是相對于瀏覽器窗口定位，并且不會(huì)隨著滾動(dòng)條進(jìn)行滾動(dòng)。

固定定位的最常見的一種用途是在頁面中創(chuàng)建一個(gè)固定頭部、固定腳部或者固定側(cè)邊欄，不需使用margin、border、padding。

讓一個(gè)元素在瀏覽器窗口左右上下居中的方式：

方法一：

position:fixed
left:50%;
top:50%;
margin-left: -盒子寬度的一半
margin-top:-盒子高度的一半

方法二：

position:fixed;
left:0;
right:0
top:0
bottom:0
margin:auto

4、粘性定位(sticky 存在兼容問題)

特點(diǎn)：



	
	
		
	
	
		
SECTION-1

		
SECTION-2

		
SECTION-3

		
SECTION-4

		
SECTION-5

html5定位有哪些

5、靜態(tài)定位（static 默認(rèn)）

當(dāng)你沒有為一個(gè)元素(例如div)指定定位方式時(shí)，默認(rèn)為static，也就是按照文檔的流式(flow)定位，將元素放到一個(gè)合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適應(yīng)，取得相對較好的布局效果。

一般來說，我們不需要指明當(dāng)前元素的定位方式是static——因?yàn)檫@是默認(rèn)的定位方式。除非你想覆蓋從父元素繼承來的定位系統(tǒng)。

left,top屬性對static沒有效果，static是靠margin這些定位的。

以

看完上述內(nèi)容，你們掌握html5定位有哪些的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！


當(dāng)前題目：html5定位有哪些
地址分享：http://weahome.cn/article/gicceh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部