|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于css如何使用position 屬性實現定位效果？css中的4種定位方法介紹（實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。css中定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。下面開始介紹如何使用css position屬性實現定位效果。 一：靜態定位（static） 元素按照其在 HTML 中的位置順序決定排布的過程，默認定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。本元素需要設置position為static。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網-position元素(靜態定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
margin: 10px auto;
}
.static {
position: static;
border: 3px solid #007AFF;
}
</style>
</head>
<body>
<div class="box">
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，無特殊定位，遵循正常的文檔流對象:</p>
<div class="static">
該元素使用了 position: static;
</div>
</div>
</body>
</html>下面是效果圖：
二：相對定位（relative） 相對定位被看作普通流定位模型的一部分，定位元素的位置相對于它在普通流中的位置進行移動top,left,bottom,right都可以有值。使用相對定位的元素不管它是否進行移動，元素仍要占據它原來的頁面空間，可以設置z-index。使本元素相對于文檔流中的元素，或者脫離文檔流但是z-index的值比本元素的值要小的元素更加靠近用戶的視線。相對定位最大的作用是為了實現某個元素相對于本元素的左上角絕對定位，本元素需要設置position為relative。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網-position元素(相對定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
margin: 10px auto;
}
.box1{
background-color: red;
width:100px;
height:100px;
}
.box2{
background-color: yellow;
width:100px;
height:100px;
position: relative;
left: 20px;
}
.box3{
background-color: blue;
width:100px;
height:100px;
position: relative;
right: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>position: relative;</h2>
<div class="box1">正常位置的盒子</div>
<div class="box2">相對于其正常位置向左移動的盒子</div>
<div class="box3">相對于其正常位置向右移動的盒子</div>
</div>
</body>
</html>下面是效果圖：
相對定位元素經常被用來作為絕對定位元素的容器塊。 三：絕對定位（absolute） 將被賦予絕對定位的元素從它在普通流中的位置中拖出，使用left、right、top、bottom等屬性相對于其最接近的一個最有定位設置的父級元素進行絕對定位，如果元素的父級沒有設置定位屬性，則依據 body 元素左上角作為參考進行定位。絕對定位元素可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在上面，可以有負值。 絕對定位的定位方法：如果它的父元素設置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就會相對于它的父元素來定位，位置通過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設置定位，那么就得看它父元素的父元素是否有設置定位，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對于設置了除static定位之外的定位的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那么它就會相對于文檔body來定位。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網-position元素(絕對定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
}
.div1 {
width: 150px;
height: 150px;
background: yellow;
}
.div2 {
width: 150px;
height: 150px;
background: red;
top: 150px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<h2>position: absolute;</h2>
<div class="div1">
父元素
<div class="div2">子元素</div>
</div>
</div>
</body>
</html>下面是效果圖：
四、固定定位（fixed） 固定定位與絕對定位類似，但它是相對于瀏覽器窗口定位，并且不會隨著滾動條進行滾動。 固定定位的最常見的一種用途是在頁面中創建一個固定頭部、固定腳部或者固定側邊欄，不需使用margin、border、padding。本元素需要設置position為fixed。 那么以上就是關于css使用position屬性達到定位效果的具體用法介紹，具有一定的參考價值，希望對有需要的朋友有所幫助！ 以上就是css如何使用position 屬性實現定位效果？css中的4種定位方法介紹（實例）的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
