中国videosex高潮喷水,yy色综合,最近更新2019中文字幕高清

首頁(yè) 免費(fèi)課 css定位 position 筆記

css定位 position

                
                袁三日
            Web前端工程師

                    查看講師更多課程 
                    袁三日講師的其他課程
                
bootstrap快速入門
中級(jí)·100952
免費(fèi)課程
                                
                難度初級(jí)
            
                時(shí)長(zhǎng) 1小時(shí)18分
            
                學(xué)習(xí)人數(shù)
            
綜合評(píng)分9.33
                            96人評(píng)價(jià)
                        查看評(píng)價(jià)
                                9.6
                                內(nèi)容實(shí)用
                            
                                9.2
                                簡(jiǎn)潔易懂
                            
                                9.2
                                邏輯清晰

最熱最新

joey__
標(biāo)準(zhǔn)流兩大元素
1. 塊級(jí)元素：div，H1-H6,有序無(wú)序列表（ol,ul,li）,table，p
2. 內(nèi)聯(lián)元素： a, span,img ,input
查看全部

0 采集收起來(lái)源：文檔流
2018-11-26
優(yōu)雅的刺猬ing

CSS之position ① HTML三種布局方式標(biāo)準(zhǔn)流、定位（position）、浮動(dòng)（float） ② 定位和浮動(dòng)是脫離標(biāo)準(zhǔn)流的布局方式。 ③定位（position）參數(shù)值㈠static：默認(rèn)值，標(biāo)準(zhǔn)流布局㈡relative：相對(duì)定位，相對(duì)于左上角原點(diǎn)定位。（left,top：向右向下象限內(nèi)定位），（right，bottom：向左右上象限內(nèi)定位）㈢absolute：絕對(duì)定位，根據(jù)left，top，right，bottom，分別以屏幕的四個(gè)點(diǎn)為原點(diǎn)定位。（由于脫離了標(biāo)準(zhǔn)流，設(shè)置了absolute的元素的高度不在html高度內(nèi)；如果父元素不具備定位屬性，則當(dāng)前定位元素還是以屏幕的四個(gè)角定位）㈣fixed：只相對(duì)于屏幕的四個(gè)頂點(diǎn)定位，不受制于任何父元素，即使父元素具有絕對(duì)定位屬性。㈤inherit：繼承，如果父元素沒(méi)有定位屬性，即使子元素設(shè)置了inherit也無(wú)效。 ④z-index 只作用于設(shè)置了定位屬性的元素。可以設(shè)置元素的疊加順序，但依賴定位屬性。三種取值：㈠auto 不參與層級(jí)比較㈡num 大的覆蓋小的，負(fù)值時(shí)會(huì)被普通流中的元素覆蓋㈢inherit 子元素繼承父元素的z-index ⑤水平垂直居中 position：fixed left：50% top：50% margin-left：寬/2 margin-top：高/2

查看全部

0 采集收起來(lái)源：側(cè)邊欄導(dǎo)航跟隨案例
2018-11-21
優(yōu)雅的刺猬ing

css之position html三種布局方式：文檔流、定位（position）、浮動(dòng)（float） position值： static：默認(rèn)值，文檔流布局， relative：相對(duì)布局，相對(duì)于左上方原點(diǎn)處進(jìn)行偏移，（向下向右區(qū)間定位left,top）,（向左向上區(qū)間定位right,bottom） absolute：

查看全部

0 采集收起來(lái)源：position-absolute
2018-11-20
余生歌

父元素的層級(jí)大于相鄰元素的層級(jí) 不論層級(jí)多小,都可以繼承父元素的層級(jí),大于相鄰元素層級(jí)。

查看全部

0 采集收起來(lái)源：z-index
2018-11-12
余生歌

絕對(duì)定位 absolute? 當(dāng)參數(shù)是left（數(shù)值越大，元素位置水平越向右。）和top時(shí)? 元素以網(wǎng)頁(yè)左上角為原點(diǎn) 由左向右由上至下移動(dòng)；當(dāng)參數(shù)是right和bottom時(shí)，網(wǎng)頁(yè)以右上角為原點(diǎn) 元素由右向左由上至下移動(dòng)；當(dāng)參數(shù)是left和bottom時(shí)，元素以網(wǎng)頁(yè)左下角為原點(diǎn)，從左向右，從下到上移動(dòng)；當(dāng)參數(shù)是right和bottom是，元素以右下角為原點(diǎn)，從右向左從下到上移動(dòng)。? 相對(duì)定位 relative? 則是始終以網(wǎng)頁(yè)左上角為原點(diǎn)，隨著參數(shù)改變做以上移動(dòng)。

查看全部

3 采集收起來(lái)源：position-absolute
2018-11-12
水化冰流

個(gè)人結(jié)合老師課堂制作導(dǎo)航欄的第二種形式，僅供參考和題出更簡(jiǎn)潔的方式，謝謝。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body{ margin:0; padding:0; }
.waik{
height: 4030px;
width: 100%;
background: url(../img/ShuiCheng.jpg) center top;
}
.wdh{
height: 205px;
width: 160px;
position: fixed;
top: 50%;
left: 0px;
margin-top: -103px;
font-family: "微軟雅黑";
}
.ndh{

height: auto;
width: 160px;
border-bottom: 1px solid white;
background: black;
text-align: center;
line-height: 40px;
color: white;
font-size: 16px;
cursor: pointer;
position: relative;
}
.dy{
width: 160px;
height: 40px;
left: 0px;
}
.ndh:hover .dej{
display: block;
}

.dej{
width: 160px;
height: auto;

background: skyblue;
text-align: center;
line-height: 40px;
color: chartreuse;
font-size: 16px;
display: none;
margin-left: 160px;
position: absolute;
margin-top: -80px;
}
.ej{
width: 160px;
height: 40px;
color: darkblue;
border-bottom: 1px solid white;
}
.ej:hover .dsj{
display: block;
}

.dsj{
width: 160px;
height: auto;
background: chartreuse;
text-align: center;
line-height: 40px;
color: blue;
font-size: 16px;
display: none;
margin-left: 160px;
position: absolute;
margin-top: -80px;
}
.sj{
width: 160px;
height: 40px;
color: darkblue;
border-bottom: 1px solid white;
}
</style>
</head>

<body>

<div class="waik">
<div class="wdh">
<div class="ndh">
<div class="dy">第一級(jí)導(dǎo)航欄</div>
<div class="dej">
<div class="ej">第二級(jí)導(dǎo)航欄
? ? <div class="dsj">
<div class="sj">第三級(jí)導(dǎo)航欄</div>
<div class="sj">第三級(jí)導(dǎo)航欄</div>
<div class="sj">第三級(jí)導(dǎo)航欄</div>
</div>
</div>

<div class="ej">第二級(jí)導(dǎo)航欄
? ? <div class="dsj">
<div class="sj">第三級(jí)導(dǎo)航欄</div>
<div class="sj">第三級(jí)導(dǎo)航欄</div>
<div class="sj">第三級(jí)導(dǎo)航欄</div>
</div>
</div>
<div class="ej">第二級(jí)導(dǎo)航欄
? ? <div class="dsj">
<div class="sj">第三級(jí)導(dǎo)航欄</div>
<div class="sj">第三級(jí)導(dǎo)航欄</div>
<div class="sj">第三級(jí)導(dǎo)航欄</div>
</div>
</div>
</div>
</div>
<div class="ndh">
<div class="dy">第一級(jí)導(dǎo)航欄</div>
<div class="dej">
<div class="ej">第二級(jí)導(dǎo)航欄</div>
<div class="ej">第二級(jí)導(dǎo)航欄</div>
<div class="ej">第二級(jí)導(dǎo)航欄</div>
</div>
</div>
<div class="ndh">
<div class="dy">第一級(jí)導(dǎo)航欄</div>
<div class="dej">
<div class="ej">第二級(jí)導(dǎo)航欄</div>
<div class="ej">第二級(jí)導(dǎo)航欄</div>
<div class="ej">第二級(jí)導(dǎo)航欄</div>
</div>
</div>
<div class="ndh">
<div class="dy">第一級(jí)導(dǎo)航欄</div>
<div class="dej">
<div class="ej">第二級(jí)導(dǎo)航欄</div>
<div class="ej">第二級(jí)導(dǎo)航欄</div>
<div class="ej">第二級(jí)導(dǎo)航欄</div>
</div>
</div>
<div class="ndh">
<div class="dy">第一級(jí)導(dǎo)航欄</div>
<div class="dej">
<div class="ej">第二級(jí)導(dǎo)航欄</div>
<div class="ej">第二級(jí)導(dǎo)航欄</div>
<div class="ej">第二級(jí)導(dǎo)航欄</div>
</div>
</div>
</div>

</div>

</body>
</html>?

查看全部

0 采集收起來(lái)源：側(cè)邊欄導(dǎo)航跟隨案例
2018-11-08
水化冰流

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 個(gè)人覺(jué)得這種側(cè)邊欄導(dǎo)航制作比較實(shí)用美觀，結(jié)合老師講解制作完成，僅供參考。

.ja{
width: 100%;
height: 4030px;
background: url(../img/ShuiCheng.jpg) center top;
}

.jb{
width: 160px;
height: 205px;
position: fixed;
left: 0px;
top: 50%;
margin-top: -103px;
font-family: "微軟雅黑";
}

.jb-a{
height: auto;
width: 160px;
border-bottom: 1px solid white;
background: black;
text-align: center;
line-height: 40px;
color: white;
font-size: 16px;
cursor: pointer;
}

.jb-a-a{
width: 160px;
height: 40px;
left: 0px;

}

.jb-a:hover .jb-a-a-3{
display: block;
}

.jb-a-a-3{
width: 160px;
height: auto;
position: absolute;
left: 160px;
margin-top: -80px;
display: none;

}

.jb-a-a-3a{
width: 160px;
height: auto;
background: darkmagenta;
border-bottom: 1px solid red;
text-align: center;
line-height: 40px;
color: blue;

}

.jb-a-a-3a:hover .s-4{
display: block;
}

.s-4{
width: 160px;
height: auto;
position: absolute;
left: 160px;
margin-top: -80px;
display: none;
}

.s-4a{
width: 160px;
height: auto;
background: darkmagenta;
border-bottom: 1px solid red;
text-align: center;
line-height: 40px;
color: blue;

}
CSS部分
-------------------------------------------------------------------------------------
代碼身體部分

<div class="ja">
<div class="jb">
<div class="jb-a">
<div class="jb-a-a">慕課網(wǎng)的標(biāo)題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">
二級(jí)列表展示
<div class="s-4">
<div class="s-4a">三級(jí)列表</div>
<div class="s-4a">三級(jí)列表</div>
<div class="s-4a">三級(jí)列表</div>
</div>
</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
</div>
</div>
<div class="jb-a">
<div class="jb-a-a">慕課網(wǎng)的標(biāo)題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
</div>
</div>
<div class="jb-a">
<div class="jb-a-a">慕課網(wǎng)的標(biāo)題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
</div>
</div>
<div class="jb-a">
<div class="jb-a-a">慕課網(wǎng)的標(biāo)題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
</div>
</div>
<div class="jb-a">
<div class="jb-a-a">慕課網(wǎng)的標(biāo)題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
<div class="jb-a-a-3a">二級(jí)列表展示</div>
</div>
</div>
</div>
</div>

查看全部

2 采集收起來(lái)源：側(cè)邊欄導(dǎo)航跟隨案例
2018-11-07
沃夫 00:16

塊元素和內(nèi)聯(lián)元素

查看全部

0 采集收起來(lái)源：position-relative
2018-10-31
慕粉1470930144

z-index：只作用于帶有定位屬性的元素（position:static除外）；
普通元素中也存在層級(jí)關(guān)系（margin-top:-50px）;

注意：
當(dāng)position:absolute沒(méi)有設(shè)置left,top，right,bottom時(shí)，雖然脫標(biāo)但是margin,padding仍然對(duì)其有影響。
當(dāng)其設(shè)置top:0,left:0;是以窗口左上角為原點(diǎn)（即便此時(shí)margin,padding不為零）；

查看全部

1 采集收起來(lái)源：z-index
2018-10-27
慕粉1470930144

absolute 當(dāng)其父元素不具有定位屬性，則以窗口為定位

查看全部

4 采集收起來(lái)源：position-absolute
2018-10-27
fanlavyu_ 01:03

z-index?

查看全部

0 采集收起來(lái)源：z-index
2018-10-14
慕粉1237183099 00:42

兩大元素的

查看全部

0 采集收起來(lái)源：文檔流
2018-10-12
冷面銀槍

relative相對(duì)于自己定位；
absolute相對(duì)于第一個(gè)非statci的父元素定位，沒(méi)有父元素則相對(duì)于窗口，脫離文檔流
fixed相對(duì)于窗口定位，脫離文檔流

查看全部

0 采集收起來(lái)源：position-relative
2018-10-05
精慕門1885363

盒子模型：通過(guò)改變盒子的外邊或者內(nèi)邊來(lái)實(shí)現(xiàn)元素的移動(dòng)
定位：通過(guò)元素的位置移動(dòng)來(lái)改變出現(xiàn)在網(wǎng)頁(yè)的相對(duì)位置中

查看全部

0 采集收起來(lái)源：定位和邊距的區(qū)別以及彈出層的簡(jiǎn)單實(shí)例
2018-10-05
風(fēng)帆0

Postion屬性是relative時(shí): 設(shè)置right和bottom:x以左方向?yàn)檎?，y以上方向?yàn)檎?

查看全部

0 采集收起來(lái)源：課程簡(jiǎn)介
2018-10-04