css的相對定位

2021-07-27 14:13:53 字數 649 閱讀 9304

二、相對定位

了解層模型的了絕對定位,接下來我們就來聊聊相對定位。如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素「相對於

」它的起點進行移動。設定乙個元素為相對定位,只需要設定position

:releative。通過乙個簡單的例子認識什麼是相對定位:我們定義乙個

div,樣式設定為

div{

width: 200px;

height: 200px;

border: 1px solid green;

此時我們可以看到在頁面上顯示為

此時我們對它的樣式做一些修改

div{

width: 200px;

height: 200px;

border: 1px solid green;

position: relative;

left:100px;

top: 50px;

此時頁面顯示的效果:

CSS 相對定位

相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素 相對於 它的起點進行移動。如果將 top 設定為 20px,那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素,那麼會在元素左邊建立 30...

css的相對定位 絕對定位

相對定位 relative 絕對定位 absolute 相對定位 relative 相對於原來位置移動,元素設定此屬性之後仍然處在文件流中,不影響其他元素的布局 絕對定位 absolute 1.在父元素沒有設定相對定位或絕對定位的情況下,元素相對於根元素定位 即html元素 是父元素沒有 2.父元素...

CSS相對定位絕對定位

absolute 絕對定位 一共有四個屬性值 top right bottom left position absolute top 20px 絕對定位的參考點就是他的父級。同理,如果父級沒有定位屬性,就查詢他的爺爺級.relative 相對定位相對定位與絕對定位結合使用 通常情況下,在對元素設定絕...