相對定位:
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值是正值,元素的位置就向下移...