關(guān)于定位布局中的相對定位

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 18:53:13

關(guān)于定位布局中的相對定位

關(guān)于定位布局中的相對定位:關(guān)于CSS中定位布局的相對定位-relative相對定位一個最大特點(diǎn)是：自己通過定位跑開了還占用著原來的位置，不會讓給他周圍的諸如文本流之類的對象。相對定位也比較獨(dú)立，做什么事它自己說了算，要定位的時候，它是以自己本身所在位置偏移的（相對對象本身偏移）

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀關(guān)于定位布局中的相對定位:關(guān)于CSS中定位布局的相對定位-relative相對定位一個最大特點(diǎn)是：自己通過定位跑開了還占用著原來的位置，不會讓給他周圍的諸如文本流之類的對象。相對定位也比較獨(dú)立，做什么事它自己說了算，要定位的時候，它是以自己本身所在位置偏移的（相對對象本身偏移）

關(guān)于CSS中定位布局的相對定位-relative

相對定位一個最大特點(diǎn)是：自己通過定位跑開了還占用著原來的位置，不會讓給他周圍的諸如文本流之類的對象。相對定位也比較獨(dú)立，做什么事它自己說了算，要定位的時候，它是以自己本身所在位置偏移的（相對對象本身偏移）。

相對定位常與絕對定位結(jié)合用，一般是給父級設(shè)定相對定位方式，子級元素就可以相對它進(jìn)行方便的絕對定位了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .orange{
 width: 400px;
 height: 300px;
 background-color: orange;
 }
/*紅色區(qū)塊設(shè)置為相對布局，雖然往下便宜150PX,但仍占據(jù)了位置，使得黃色，綠色無法浮動到最左邊*/
 .red{
 width: 100px;
 height: 100px;
 background-color: red;
 float: left;
 position:relative;
 margin-top: 150px;

 }

 .yellow{
 width: 100px;
 height: 100px;
 background-color: yellow;
 float: left;
 }
 
 .green{
 width: 100px;
 height: 100px;
 background-color: green;
 float: left;
 }

/*藍(lán)色區(qū)塊相對自身偏離了30px,10px,但黑色區(qū)塊的位置是以藍(lán)色之前的位置向下偏移10px*/

 .blue{
 width:50px;
 height: 50px;
 background-color: blue;
 position: relative;
 top:30px;
 left:10px;

 }

 .black{
 width:30px;
 height: 30px;
 background-color: black;
 margin-top: 10px;
 }
 </style>
</head>
<body>
 <p class="orange">
 <p class = "red">
 <p class = "blue"></p>
 <p class = "black"></p>
 </p>
 <p class = "yellow"></p>
 <p class = "green"></p>
 </p>
</body>
</html>

更多關(guān)于定位布局中的相對定位相關(guān)文章請關(guān)注PHP中文網(wǎng)！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

關(guān)于定位布局中的相對定位

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：定位中的布局

熱門焦點(diǎn)

關(guān)于定位布局中的相對定位

關(guān)于定位布局中的相對定位

關(guān)于定位布局中的相對定位

最新推薦

猜你喜歡

熱門推薦