css定位 position_技术笔记

BEE_BABOO 2021-03-18

的谔谔谔谔谔谔谔谔谔谔

0赞 · 0采集
BEE_BABOO 2021-03-18

哈哈哈哈哈哈哈哈哈哈哈哈哈

0赞 · 0采集
qq_暖阳 2020-11-14

display:none;元素不显示
.nav-li hover:ul{ hover：是一个伪类
display:block鼠标移动到某元素时，取代之前的display:none

0赞 · 0采集
慕瓜0240298 2020-07-14

明年

截图
1赞 · 0采集
阿洋丶 2020-02-19

left：0（px可省略）

0赞 · 0采集
qq_宝慕林7419120 2019-12-24

ul li内容

0赞 · 0采集
洋__ 2019-10-02

侧边导航栏笔记，并且有居中left和top为50%时margin-top：-的一半处理居中的问题

0赞 · 0采集
慕雪5348528 2019-09-06

position定位属性，相对定位，绝对定位，固定定位，及z-index

截图
0赞 · 0采集

慕仙7321963 2019-08-20

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>侧边栏导航跟随案例</title><style>*{padding: 0;margin:0;}body{height: 3000px;background: pink}.nav li{list-style: none;cursor:pointer;}.nav{position:fixed;left: 0;top: 50%;transform:translateY(-50%);width:160px;height:auto;text-align:center;}.first{line-height: 40px;background: #666;}.first>li{position:relative;}.first>li:hover >.second{display: block;}.second>li:hover >.third{display: block;}.second{display: none;position:absolute;top:0;left:160px;}.second>li{position: relative;width:160px;line-height: 40px;background: #666;}.third{display: none;position:absolute;top:0;left:160px;}.third>li{width:160px;line-height: 40px;background: #666;}</style></head><body><div class="nav"><ul class="first"><li>菜单一<ul class="second"><li>二级菜单1<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单2<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单3<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li></ul></li><li>菜单二<ul class="second" ><li>二级菜单1<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单2<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单3<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li></ul></li><li>菜单三<ul class="second"><li>二级菜单1<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单2<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li><li>二级菜单3<ul class="third"><li>三级菜单1</li><li>三级菜单2</li><li>三级菜单3</li></ul></li></ul></li></ul></div></body></html>

0赞 · 0采集

慕尼黑2392301 2019-07-31

absolute relative

截图
0赞 · 0采集
hootly 2019-07-07

css定位与鼠标移动效果

0赞 · 0采集
七月啊 2019-06-24

display:none;元素不显示
.nav-li hover:ul{
display:block鼠标移动到某元素时，取代之前的display:none

0赞 · 0采集

无根鸟飞呀飞 2019-06-12

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    *{margin: 0px;padding: 0px;}    .container{      width: 100%;      height: 6731px;      background: url(img/1.png) no-repeat center top;    }    .nav{      width: 160px;      height: 205;      position: fixed;      left: 0;      top: 50%;      margin-top: -103px;      font-family: "微软雅黑";    }    .nav-li{      width: 160px;      height: auto;      border-bottom: 1px solid #FFF;      background: #333;      text-align: center;      color: #FFF;      font-size: 16px;      line-height: 40px;      cursor: pointer;    }  .nav-li ul{    width: 160px;    height: auto;    background: #fff;    display: none;  }  .nav-li ul li{    width: 160px;    height: 40px;    border-bottom: 1px dashed #666;    color:#333;text-align: center;line-height: 40px; position: relative; }.nav-li ul li:hover .list-3{  display: block;}.tit{  width: 160px;  height: 40px;}.nav-li:hover ul{  display: block;}.list-3{  width: 160px;  height: auto;  position: absolute;  left: 160px;  top: 0px;  display: none;}.list-3Dom{  width: 160px;  height: 40px;  background: #444;  border-bottom: 1px solid #FFF;  text-align: center;  line-height: 40px;  color: #FFF}  </style></head><body>  <div class="container">    <div class="nav">      <div class="nav-li">        <div class="tit">慕课网的标题</div>        <ul>          <li>二级栏目            <div class="list-3">             <div class="list-3Dom">               三级栏目             </div>             <div class="list-3Dom">               三级栏目             </div>             <div class="list-3Dom">               三级栏目             </div>            </div></li>           <li>二级栏目</li>            <li>二级栏目</li>        </ul>      </div>         <div class="nav-li">        <div class="tit">慕课网的标题</div>        <ul>          <li>二级栏目            <div class="list-3">             <div class="list-3Dom">               三级栏目             </div>             <div class="list-3Dom">               三级栏目             </div>             <div class="list-3Dom">               三级栏目             </div>            </div></li>           <li>二级栏目</li>            <li>二级栏目</li>        </ul>      </div>   <div class="nav-li">        <div class="tit">慕课网的标题</div>        <ul>          <li>二级栏目            <div class="list-3">             <div class="list-3Dom">               三级栏目             </div>             <div class="list-3Dom">               三级栏目             </div>             <div class="list-3Dom">               三级栏目             </div>            </div></li>           <li>二级栏目</li>            <li>二级栏目</li>        </ul>      </div>   <div class="nav-li">        <div class="tit">慕课网的标题</div>        <ul>          <li>二级栏目            <div class="list-3">             <div class="list-3Dom">               三级栏目             </div>             <div class="list-3Dom">               三级栏目             </div>             <div class="list-3Dom">               三级栏目             </div>            </div></li>           <li>二级栏目</li>            <li>二级栏目</li>        </ul>      </div>    </div>  </div></body></html>

0赞 · 0采集

慕工程2087570 2019-03-19

hover .list{ display:block }鼠标到达才显示

截图
1赞 · 0采集
慕工程2087570 2019-03-19

cusor:poner改变鼠标的形状

截图
0赞 · 0采集
hpyan 2019-03-11

默认static，fixed不受层级影响针对窗口定位，absolute默认宽高0，inherit继承，relative父级关系确定zindex

0赞 · 1采集
慕标8412388 2019-03-04

鼠标指向导航栏1级出现2级时： 1级:hover 2级{ display:block; } 2级{ display

0赞 · 0采集
宝慕林9503786 2019-02-20

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

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

相对定位不会脱离正常文档流，绝对定位会脱离正常文档流

1赞 · 0采集
慕斯1427066 2019-01-03

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

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

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

0赞 · 0采集
Xu梦瑜 2018-12-09

好

截图
1赞 · 0采集
优雅的刺猬ing 2018-11-21

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赞 · 0采集
水化冰流 2018-11-08

个人结合老师课堂制作导航栏的第二种形式，仅供参考和题出更简洁的方式，谢谢。
<!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赞 · 0采集
水化冰流 2018-11-07

个人觉得这种侧边栏导航制作比较实用美观，结合老师讲解制作完成，仅供参考。

.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赞 · 0采集
慕粉1503435868 2018-09-15

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

0赞 · 0采集
慕容8065906 2018-09-13

很好的资料呢！

0赞 · 0采集
qq_邪恶天才强霸_0 2018-08-01

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


0赞 · 0采集
骋旭小白 2018-07-21

hover ， display block、none、

0赞 · 0采集
梦龙的课堂 2018-07-19

先让三级栏目隐藏。
.list3{ display:none;}
当鼠标移动到二级栏目li上，三级栏目变成块。
li:hover .list3{ display:block;}

0赞 · 0采集
梦龙的课堂 2018-07-19

学到的知识点：鼠标移动上去，可以改变样式。
a:hover ul{display:block;}

0赞 · 0采集
梦龙的课堂 2018-07-19

微信底部的控制部分，永远固定在屏幕底部，也可以用该绝对定位。

position:fixed;
基于浏览器窗口进行定位

0赞 · 1采集

数据加载中...