css定位 position_学习笔记

首页免费课 css定位 position 笔记

css定位 position

                
                袁三日
            Web前端工程师

                    查看讲师更多课程 
                    袁三日讲师的其他课程
                
bootstrap快速入门
中级·100994
免费课程
                                
                难度初级
            
                时长 1小时18分
            
                学习人数
            
综合评分9.33
                            96人评价
                        查看评价
                                9.6
                                内容实用
                            
                                9.2
                                简洁易懂
                            
                                9.2
                                逻辑清晰

最热最新

qq_Bang_aBDKMO

fixed（可以用来做广告，弹窗等，它的位置不会随着浏览器的滚动而改变）

查看全部

0 采集收起来源：position-fiexed
2019-02-19
qq_Bang_aBDKMO

absolute(可以用top left right bottom来调，而以top 和bottom来定位时的x轴又不同，这也是它和relative的区别)
fixed
inherit

查看全部

0 采集收起来源：position-absolute
2019-02-19
慕斯1427066

cursor:pointer; 鼠标由箭头变为手掌，代表可以点击。

*{
    padding:0;
    margin:0;
}     /*消除边距*/

三级目录展示方式: 一级目录固定定位，二级目录相对定位，三级目录绝对定位。
先让三级栏目隐藏。
.list3{ display:none;}
当鼠标移动到二级栏目li上，三级栏目变成块。
li:hover .list3{ display:block;}

查看全部

0 采集收起来源：侧边栏导航跟随案例
2019-01-03
zhaoYX_com

z-index可以设置元素的叠加顺序，但是要依赖定位属性
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-inde为负值，元素被普通流中的元素覆盖

查看全部

0 采集收起来源：z-index
2018-12-06
Ian_Morris 00:47

position中的五个可选参数

查看全部

0 采集收起来源：position-relative
2018-12-05
Ian_Morris 00:46

常见块级元素：div,H1~H6,table,p,ol,ul,li
常见内联元素：a,span,img,input

查看全部

0 采集收起来源：文档流
2018-12-05
慕九州8076275

number可以设置层级大小 number数字越大则其层级级别越大

查看全部

0 采集收起来源：z-index
2018-11-30
joey__

HTML中的三种布局方式
标准流
浮动
定位

查看全部

0 采集收起来源：文档流
2018-11-26
初__ 00:03

z-index 描述

查看全部

1 采集收起来源：z-index
2018-11-26
joey__
标准流两大元素
1. 块级元素：div，H1-H6,有序无序列表（ol,ul,li）,table，p
2. 内联元素： a, span,img ,input
查看全部

0 采集收起来源：文档流
2018-11-26
余生歌

父元素的层级大于相邻元素的层级不论层级多小,都可以继承父元素的层级,大于相邻元素层级。

查看全部

0 采集收起来源：z-index
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
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