css定位 position_学习笔记

首页免费课 css定位 position 笔记

css定位 position

                
                袁三日
            Web前端工程师

                    查看讲师更多课程 
                    袁三日讲师的其他课程
                
bootstrap快速入门
中级·100975
免费课程
                                
                难度初级
            
                时长 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