Css如何實(shí)現(xiàn)相對定位

發(fā)布時(shí)間：2022-03-05 14:30:28 來源：億速云閱讀：189 作者：小新欄目：web開發(fā)

小編給大家分享一下Css如何實(shí)現(xiàn)相對定位，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

相對定位指的是設(shè)置為相對定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

如果將box2的框 top 設(shè)置為 50px，那么框?qū)⒃谠恢庙敳肯旅?span lang="EN-US"> 50 像素的地方。如果 left 設(shè)置為 20 像素，那么會(huì)在元素左邊創(chuàng)建 20 像素的空間，也就是將元素向右移動(dòng)。

只要box2設(shè)置了position為relative ，box1和box3始終不會(huì)因?yàn)?span lang="EN-US">box2的改變而改變。

<!DOCTYPE html><html lang="en">

<head>

.box {

width: 200px;

height:100px;

border: 1px solid #F00;

float: left;

margin:0 0 0 30px;

}

.box2 {

position: relative;

left: 20px;

top: 50px;

}

</style>

</head>

<body>

</div>

</body>

</html>

以上是“Css如何實(shí)現(xiàn)相對定位”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

猜你喜歡