AV在线一区二区三区,午夜毛片影院免费看,久草在线视频国语首页

首頁免費課 css定位 position 筆記

css定位 position

                
                袁三日
            Web前端工程師

                    查看講師更多課程 
                    袁三日講師的其他課程
                
bootstrap快速入門
中級·100952
免費課程
                                
                難度初級
            
                時長 1小時18分
            
                學習人數
            
綜合評分9.33
                            96人評價
                        查看評價
                                9.6
                                內容實用
                            
                                9.2
                                簡潔易懂
                            
                                9.2
                                邏輯清晰

最熱最新

joey__
標準流兩大元素
1. 塊級元素：div，H1-H6,有序無序列表（ol,ul,li）,table，p
2. 內聯元素： a, span,img ,input
查看全部

0 采集收起來源：文檔流
2018-11-26
優雅的刺猬ing

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

查看全部

0 采集收起來源：側邊欄導航跟隨案例
2018-11-21
優雅的刺猬ing

css之position html三種布局方式：文檔流、定位（position）、浮動（float） position值： static：默認值，文檔流布局， relative：相對布局，相對于左上方原點處進行偏移，（向下向右區間定位left,top）,（向左向上區間定位right,bottom） absolute：

查看全部

0 采集收起來源：position-absolute
2018-11-20
余生歌

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

查看全部

0 采集收起來源：z-index
2018-11-12
余生歌

絕對定位 absolute? 當參數是left（數值越大，元素位置水平越向右。）和top時? 元素以網頁左上角為原點由左向右由上至下移動；當參數是right和bottom時，網頁以右上角為原點元素由右向左由上至下移動；當參數是left和bottom時，元素以網頁左下角為原點，從左向右，從下到上移動；當參數是right和bottom是，元素以右下角為原點，從右向左從下到上移動。? 相對定位 relative? 則是始終以網頁左上角為原點，隨著參數改變做以上移動。

查看全部

3 采集收起來源：position-absolute
2018-11-12
水化冰流

個人結合老師課堂制作導航欄的第二種形式，僅供參考和題出更簡潔的方式，謝謝。
<!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">第一級導航欄</div>
<div class="dej">
<div class="ej">第二級導航欄
? ? <div class="dsj">
<div class="sj">第三級導航欄</div>
<div class="sj">第三級導航欄</div>
<div class="sj">第三級導航欄</div>
</div>
</div>

<div class="ej">第二級導航欄
? ? <div class="dsj">
<div class="sj">第三級導航欄</div>
<div class="sj">第三級導航欄</div>
<div class="sj">第三級導航欄</div>
</div>
</div>
<div class="ej">第二級導航欄
? ? <div class="dsj">
<div class="sj">第三級導航欄</div>
<div class="sj">第三級導航欄</div>
<div class="sj">第三級導航欄</div>
</div>
</div>
</div>
</div>
<div class="ndh">
<div class="dy">第一級導航欄</div>
<div class="dej">
<div class="ej">第二級導航欄</div>
<div class="ej">第二級導航欄</div>
<div class="ej">第二級導航欄</div>
</div>
</div>
<div class="ndh">
<div class="dy">第一級導航欄</div>
<div class="dej">
<div class="ej">第二級導航欄</div>
<div class="ej">第二級導航欄</div>
<div class="ej">第二級導航欄</div>
</div>
</div>
<div class="ndh">
<div class="dy">第一級導航欄</div>
<div class="dej">
<div class="ej">第二級導航欄</div>
<div class="ej">第二級導航欄</div>
<div class="ej">第二級導航欄</div>
</div>
</div>
<div class="ndh">
<div class="dy">第一級導航欄</div>
<div class="dej">
<div class="ej">第二級導航欄</div>
<div class="ej">第二級導航欄</div>
<div class="ej">第二級導航欄</div>
</div>
</div>
</div>

</div>

</body>
</html>?

查看全部

0 采集收起來源：側邊欄導航跟隨案例
2018-11-08
水化冰流

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 個人覺得這種側邊欄導航制作比較實用美觀，結合老師講解制作完成，僅供參考。

.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">慕課網的標題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">
二級列表展示
<div class="s-4">
<div class="s-4a">三級列表</div>
<div class="s-4a">三級列表</div>
<div class="s-4a">三級列表</div>
</div>
</div>
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
</div>
</div>
<div class="jb-a">
<div class="jb-a-a">慕課網的標題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
</div>
</div>
<div class="jb-a">
<div class="jb-a-a">慕課網的標題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
</div>
</div>
<div class="jb-a">
<div class="jb-a-a">慕課網的標題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
</div>
</div>
<div class="jb-a">
<div class="jb-a-a">慕課網的標題</div>
<div class="jb-a-a-3">
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
<div class="jb-a-a-3a">二級列表展示</div>
</div>
</div>
</div>
</div>

查看全部

2 采集收起來源：側邊欄導航跟隨案例
2018-11-07
沃夫 00:16

塊元素和內聯元素

查看全部

0 采集收起來源：position-relative
2018-10-31
慕粉1470930144

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

注意：
當position:absolute沒有設置left,top，right,bottom時，雖然脫標但是margin,padding仍然對其有影響。
當其設置top:0,left:0;是以窗口左上角為原點（即便此時margin,padding不為零）；

查看全部

1 采集收起來源：z-index
2018-10-27
慕粉1470930144

absolute 當其父元素不具有定位屬性，則以窗口為定位

查看全部

4 采集收起來源：position-absolute
2018-10-27
fanlavyu_ 01:03

z-index?

查看全部

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

兩大元素的

查看全部

0 采集收起來源：文檔流
2018-10-12
冷面銀槍

relative相對于自己定位；
absolute相對于第一個非statci的父元素定位，沒有父元素則相對于窗口，脫離文檔流
fixed相對于窗口定位，脫離文檔流

查看全部

0 采集收起來源：position-relative
2018-10-05
精慕門1885363

盒子模型：通過改變盒子的外邊或者內邊來實現元素的移動
定位：通過元素的位置移動來改變出現在網頁的相對位置中

查看全部

0 采集收起來源：定位和邊距的區別以及彈出層的簡單實例
2018-10-05
風帆0

Postion屬性是relative時: 設置right和bottom:x以左方向為正，y以上方向為正。

查看全部

0 采集收起來源：課程簡介
2018-10-04