元素定位以及圓角樣式

2021-10-19 12:11:09 字數 2734 閱讀 8769

相對定位:

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

>

body

div#father

#first

#second

#third

style

>

head

>

>

"father"

>

"first"

>

第乙個盒子div

>

"second"

>

第二個盒子div

>

"third"

>

第三個盒子div

>

div>

body

>

html

>

相對定位: position:relative

相對於原來的位置,進行指定偏移,相對定位的話 它任然在標準文件中,原來的位置會被保留

top: -20px;

left: 20px;

bottom: 10px;

right: 20px;

絕對定位:

定位: 基於***定位,上下左右

1.父級元素沒有定位的前提下,基於瀏覽器定位

2.假設父級元素存在定位,通常會相對於父級元素進行偏移

3.在父級範圍內移動

相對於父級或者瀏覽器的位置,進行指定偏移,絕對定位的話 它不在標準文件中,原來的位置不會被保留

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

>

div#father

#first

#second

#third

style

>

head

>

>

"father"

>

"first"

>

第乙個盒子div

>

"second"

>

第二個盒子div

>

"third"

>

第三個盒子div

>

div>

body

>

html

>

固定定位 fixed

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

>

body

div:nth-of-type(1)

div:nth-of-type(2)

style

>

head

>

>

>

div1div

>

>

div2div

>

body

>

html

>

z-index:

圖層z-index:預設是0,最高無限~999

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

rel=

"stylesheet"

href

="css/style.css"

>

head

>

>

"content"

>

>

>

src=

"images/a.png"

alt="

">

li>

class

="tiptext"

>

學習微服務li

>

class

="tipbg"

>

li>

>

>

>

地點:地球li

>

ul>

div>

body

>

html

>

opacity: 0.5; /* 背景透明度*/

#content

ul,li

/*父級元素相對定位*/

#content ul

.tiptext,.tipbg

.tiptext

.tipbg

圓角樣式:

4個角

>

divstyle

>

元素定位的區別以及用法

屬性 屬性值作用 position fixed 固定定位 position relative 相對定位 position absolute 絕對定位 固定定位 以瀏覽器為參照物進行定位,元素脫離文件流 相對定位 不脫離文件流,元素有父元素的話,以父元素為參照物進行定位,沒有父元素的話,以瀏覽器為參照...

元素定位 Cypress 元素定位

cypress含有多種定位方式我們無需擔心因為定位導致測試失敗,cypress有獨一無二的定位策略能使你擺脫元素定位的噩夢。cypress專有選擇器 舉例 submitsubmitsubmit獲取元素方法 cy.get data cy submit click cy.get data test su...

html頁面形狀圓角實現示例 元素定位小知識點

position屬性分析 relative 相對定位 相對定位 相對於元素原來 不設position屬性時,元素與其他頁面元素在頁面中依次排列時的位置 的位置進行移動,元素原來的空間位置會保留下來。當前設定relative屬性的元素與頁面其他元素不在同一平面上。如果top值是正值,元素的位置就向下移...