1.如何让盒子移动到指定的位置？
(1) 采用margin的负值，破坏文档流进行移动。应用场景为头部内容和banner部分重叠
(2) 采用定位技术
.banner{
width: 100%;
height: 500px;
margin: 0px;
background-color: pink;
}
.first{
width: 800px;
height: 200px;
margin:-100px auto 0;
background-color: tomato;
}
h3{
text-align: center;
}
最后效果图如下：
2. 静态定位
- 概念：默认每个标签都是静态定位
- 语法：
position:static
3.相对定位
- 概念：元素参考原来的位置，按照指定的方向移动
- 语法：
position:relative
注意：只设置相对定位，元素没有任何影响，还需要设置偏移量
- 偏移量（可以为负值，往反方向偏移）：
- top：距离参考位置上边缘的间距；
- bottom：距离参考位置下边缘的间距；
- left：距离参考位置左边缘的间距；
- right：距离参考位置右边缘的间距；
- 相对定位的特点
- 只设置相对定位，元素没有任何影响；
- 盒子原来的空间存在；
- 设置相对定位的元素是参考原来的位置进行移动；
- 设置相对定位的元素是
破坏文档流进行移动； - 子元素设置相对定位，父元素进行移动时，
子元素跟着相对移动，原因在于子元素的参考对象为父元素； - 通常配合绝对定位一起使用；
4.绝对定位
- 概念：元素脱离文档流，按照指定的位置进行移动
- 语法：
注意：偏移量的设置方式和相对定位一样
position:absolute
- 绝对定位的特点
- 只设置绝对定位的元素会
脱离文档流 - 只设置绝对定位的元素，会在当前位置脱离文档流
- 一旦设置偏移量，元素默认
参考整个文档进行移动（设置了定位父级之后，参考最近的父级定位进行移动） - 原来的空间不再占用
行内元素设置绝对定位以后，元素变为能够支持宽高
- 只设置绝对定位的元素会
- 如何同相对定位配合使用？
- 概念
结构父级：在html代码结构中的父元素定位父级：通过设置相对定位、绝对定位、固定定位后，决定了绝对定位的元素的参考位置
.box1{
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: tomato;
position: relative;
}
.box3{
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
right: 0px;
bottom: 0px;
最终的效果图展示如下：以第二个盒子为参考位置，绝对定位到右下角的区域
注意：（1）多个定位父级，参考最近的定位父级
5.实现页面布局
.box{
width: 310px;
height: 310px;
border: 1px solid orange;
margin: 50px auto 0px;
position: relative;
}
.item{
width: 100px;
height: 100px;
background-color: orange;
text-align: center;
line-height: 100px;
}
.box-1{
position: absolute;
left: 5px;
top: 5px;
}
.box-2{
position: absolute;
right: 5px;
top: 5px;
}
.box-3{
background-color: #666;
position: absolute;
right: 105px;
top: 105px;
}
.box-4{
position: absolute;
left: 5px;
bottom: 5px;
}
.box-5{
position: absolute;
right: 5px;
bottom: 5px;
}
以大盒子为定位父级，设置相对参考位置，然后对每一个小盒子设置绝对定位，展示图如下：
6.固定定位
- 概念：元素会
脱离文档流，按照指定的位置进行移动，会固定在页面上，不会随着滚动条移动 - 语法：
position:fixed;
- 特点：
- 设置固定定位的元素会脱离文档流，并且
覆盖在标准文档流之上 - 会固定在页面上，不会随着滚动条滚动
- 只设置固定定位，当前位置脱离固定在页面上，如果设置了偏移量，
参考整个文档进行移动，固定在页面上 - 原来的空间不再占用
- 设置固定定位的元素会脱离文档流，并且
- 应用场景：头部导航固定、广告、弹出窗等
7.定位层级
- 使用情况：当多个元素进行定位时（
固定定位、相对定位、绝对定位），后面的元素会覆盖前面的元素（参考代码结构），若想要把某一定位元素优先显示在上层，则需要改变定位层级 - 设置定位的层级，语法格式为
z-index：number，其中的数字为整数，正负均可。默认值为auto，相当于0，数字越大，层级就越高，就越在上层显示。 - 当层级的数字相同时，按照
代码结构规则进行排列，即后面定位的元素显示在前面定位的元素上面 - 标准文档流的层级为0，若
z-index:-1，则该层级在标准文档流下一层
8.盒子居中技巧
margin:auto auto：可以实现让盒子水平居中，但无法垂直居中。原因是auto是一个值，自适应，浏览器自动计算得出值。而一般垂直方向上的高度是内容撑开的，高度是在变化的，因此垂直方向上的auto是禁用的- 方法一：给父元素设置相对定位作为定位父级，然后给子元素设置绝对定位，四个方向均为0，即可
水平垂直居中
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.box2{
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: pink;
margin: auto auto;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
效果如下：
- 方法二：采用绝对定位设置calc函数进行计算，计算公式为：
calc(50%-小盒子高度/宽度的一半），其中50%是以左上角的那个点为计算依据。因此还要将子元素向左以及向右移动一半。但该方法仍然需要计算
代码编写如下：
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.box2{
width: 100px;
height: 100px;
position: absolute;
top:calc(50%-50px);
left: calc(50%-50px);
background-color: pink;
}
</style>
- 方法三：通过margin-top，margin-left设置calc函数进行计算，但这种方法只适用于
正方形的盒子，矩形则不适用。
这是因为：margin、padding设置百分比时，每个方向都是参考父盒子的宽度，与高度无关
<style>
.box1{
width: 300px;
height: 200px;
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
margin-top:50%;
margin-left: 50%;
background-color: pink;
}
</style>
9.实现二级菜单
目标：
注意事项：
- 当在导航区需要设置二级菜单时，因为会出现两次
ul的情况，因此需要在第一个ul中设立子元素选择器，采用>符号
.nav .nav-ul > ul > li{
/* 左右都有5px的间距 */
padding: 0 5px;
height: 39px;
position: relative;
}
- 文字的前后均有雪碧图标时，可以采用伪元素选择器中的
::before,::after来实现，注意，伪元素选择器一定要配和content一起使用，否则没有效果。
注意：一般来说，雪碧图是以背景图片的形式直接放入li中，但是当某一导航块儿前后均有图标时，无法使用单一的背景图片插入的方式，因此可以选择伪元素选择器进行设置
/* 超链接前面和后面有雪碧图，采用伪元素选择器 */
.nav .nav-ul > ul > li > a::before{
content: "";
/* 为什么必须设置高度和宽度才能显示？ */
width: 30px;
height: 30px;
margin-top: 3px;
/* border: 1px solid red; */
background-image: url(../img/ico-index-sort.png);
/* 同行显示 */
float: left;
margin-left: 15px;
}
- 二级菜单设置步骤
- 在一级菜单的
li中再添加ul，（最好添加上边框看效果）此时要注意一级菜单的ul的设置会影响二级菜单，应该将一级菜单的样式设置使用子元素选择器 - 设置
ul、li、a的样式 - 在一级菜单的
li中设置相对定位作为二级菜单绝对定位的参考元素，此时会出现一级菜单中的第二个li覆盖二级菜单的情况，因此此时应该调整定位层级，将第二级菜单的定位层级调高，使得它覆盖在一级菜单上面 - 设置
悬浮时二级菜单才显示。首先，需要在二级菜单中设置不展示自己display:none，然后设置当鼠标悬浮:hover在一级菜单上时二级菜单出现display:block。其中ul应该是块级元素
- 在一级菜单的
.nav2{
width: 120px;
list-style: none;
border: 2px solid #e51a45;
background-color: white;
/* 设置绝对定位 */
position: absolute;
top: 0px;
left: 150px;
/* 设置定位层级 */
z-index: 2;
/* 设置不悬浮时不展示二级菜单 */
display: none;
}
.nav .nav-ul > ul > li:hover .nav2{
/* 设置悬浮在一级菜单的li上时才显示块级元素二级菜单 */
display: block;
}
1746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
