CSS定位详解及案例
文章目录
- 一、标准流
- 1.1 概念
- 1.2 不足
- 二、定位
- 2.1 概念
- 2.2 static-静态定位
- 2.3 relative-相对定位
- 2.3.1 特点：
- 2.3.2 示例一
- 2.3.3 示例二
- 2.4 fixed-固定定位
- 2.4.2 特点
- 2.4.2 示例
- 2.5 absolute-固定定位
- 2.5.1 特点
- 2.5.2 子绝父相
- 2.5.3 示例一
- 2.5.4 示例二
- 2.6 层叠关系
- 2.6.1 元素层叠
- 2.6.2 z-index特点：
- 2.6.3 比较原则
- 2.6.3.1 兄弟关系
- 2.6.3.2 如果不是兄弟关系
- 三、小结
- 3.1 对照表
- 3.2 脱标元素特点
一、标准流
1.1 概念
默认情况下，元素都是按照Normal Flow(标准流、文档流、常规流、正常流)进行排布，从左到右、从上到下按顺序摆放，互相之间不存在层叠影响。
在标准流中，可以使用margin、padding对元素进行定位，其中margin还可以设置负数。
1.2 不足
当设置一个元素的margin或padding时，通常会影响到标准流中其他元素的定位效果，也不便于实现元素层叠的效果。
二、定位
2.1 概念
CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
利用position属性可以对元素进行定位，常用取值有：static、relative、absolute和fixed，下面对每个进行分析说明
2.2 static-静态定位
- position属性的默认值
- 元素按照normal flow布局
- left、right、top、bottom没任何作用
2.3 relative-相对定位
2.3.1 特点：
- 元素按照normal flow布局
- 可以通过 left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
- left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
- 不脱档，原本占用的空间仍保留(ps:后面元素不会贴上来)
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
2.3.2 示例一
完成如下效果：
代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
sub,
sup {
font-size: 14px;
}
sub {
position: relative;
bottom: 6px;
}
sup {
position: relative;
top: 2px;
}
style>
head>
<body>
<h1>请计算n<sub>1sub>+n<sub>2sub>+n<sup>2sup>的值h1>
body>
html>
2.3.3 示例二
已知网站banner宽度为1920px，在浏览器中加载显示，默认展示为：
要想让主内容居中显示的话(不论窗口大小)，就可以使用相对定位了，最终效果为：
实现代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body{
margin: 0;
padding: 0;
}
.box{
overflow: hidden;
min-width: 1000px;
}
.box img{
position: relative;
// 向左偏移图片宽度的一半，因banner宽度为1920，此处暂写死为960
left: -960px;
// 将包含块向右偏移块宽度的50%
margin-left: 50%;
}
style>
head>
<body>
<div class="box">
<img src="./images//banner.jpg" alt="">
div>
body>
html>
2.4 fixed-固定定位
2.4.2 特点
- 元素脱离normal flow(脱标)
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是视口(viewport)
- 当画布滚动时，固定不变
2.4.2 示例
实现商城网站右侧悬浮固定效果，如图：
实现代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
i {
font-style: normal;
}
.right-aside {
position: fixed;
right: 30px;
top: 100px;
border: 1px solid #eee;
}
.right-aside a {
display: inline-block;
width: 62px;
height: 48px;
padding-top: 12px;
font-size: 12px;
border-bottom: 1px solid #eaeaea;
text-align: center;
}
.right-aside a:last-child {
border-bottom: none;
}
.right-aside a i {
display: block;
width: 20px;
height: 20px;
margin: 0 auto 3px;
/* background-color: rebeccapurple; */
}
a {
text-decoration: none;
color: #333333;
}
.right-aside ul li a:hover {
color: #ff1e32;
background-color: #fefefe;
}
.signin i {
background-image: url('./images/icon-aside-right-signin.png');
}
.shopcart i {
background-image: url('./images/icon-aside-right-cart.png');
}
.download i {
background-image: url('./images/icon-aside-right-phone.png');
}
.top i {
background-image: url('./images/icon-aside-right-top.png');
}
.signin:hover i {
background-image: url('./images/icon-aside-right-signin-active.png');
}
.shopcart:hover i {
background-image: url('./images/icon-aside-right-cart-active.png');
}
.download:hover i {
background-image: url('./images/icon-aside-right-phone-active.png');
}
.top:hover i {
background-image: url('./images/icon-aside-right-top-active.png');
}
.right-aside ul .top:hover i {
background-image: url("./images/icon-aside-right-top-active.png");
}
style>
head>
<body>
<div class="box">
<div class="right-aside">
<ul>
<li>
<a class="signin" href="">
<i class="signini">i>
<span>签到span>
a>
li>
<li>
<a class="shopcart" href="">
<i>i>
<span>购物车span>
a>
li>
<li>
<a class="download" href="">
<i>i>
<span>下载span>
a>
li>
<li>
<a class="top" href="">
<i>i>
<span>TOPspan>
a>
li>
ul>
div>
div>
body>
html>
2.5 absolute-固定定位
2.5.1 特点
- 元素脱离normal flow(脱标)
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是最近邻的祖先元素
- 如果找不到这样的祖先元素，参照对象就是视口
2.5.2 子绝父相
- 在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位
- 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，那就设置父为相对定位，子为绝对定位
2.5.3 示例一
目标效果：
实现代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #333333;
}
.box {
display: inline-block;
}
.item {
position: relative;
}
.item ul {
position: absolute;
bottom: 36px;
width: 285px;
left: 0;
right: 0;
width: 280px;
margin: 0 auto;
text-align: justify;
text-align-last: justify;
}
.item ul li {
display: inline-block;
}
.item ul li a {
display: block;
width: 80px;
height: 40px;
font-size: 12px;
border-radius: 40px;
border: 1px solid #eeeeee;
line-height: 40px;
text-align-last: center;
background-color: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
margin-top: 10px;
}
style>
head>
<body>
<div class="box">
<div class="item">
<a href="">
<img src="./images/beauty-left-img.jpg" alt="">
a>
<ul>
<li><a href="#">精致护肤a>li>
<li><a href="#">人气面膜a>li>
<li><a href="#">大牌彩妆a>li>
<li><a href="#">精致护肤a>li>
<li><a href="#">人气面膜a>li>
<li><a href="#">大牌彩妆a>li>
ul>
div>
div>
div>
body>
html>
2.5.4 示例二
实现效果：当鼠标悬浮在手机考拉上时，弹出下载二维码组件，如图：
实现代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
position: relative;
font-size: 14px;
margin-left: 300px;
}
.box span {
display: block;
/* text-align: center; */
}
.box .downloadapp {
display: none;
position: absolute;
text-align: center;
border: 1px solid #eaeaea;
padding: 1px 1px;
left: -58px;
top: 30px;
margin-left: 30px;
}
.box .downloadapp span {
display: block;
text-align: center;
}
.arrow {
position: absolute;
left: 52px;
top: -3px;
width: 8px;
height: 8px;
background-color: white;
border-left: 1px solid blue;
border-top: 1px solid blue;
transform: rotate(45deg);
}
.box span:hover + .downloadapp{
display: inline;
}
style>
head>
<body>
<div class="box">
<span>手机考拉span>
<div class="downloadapp">
<div class="arrow">div>
<img src="./images/qrcode.png" alt="">
<span>下载Appspan>
<span>领1000元新人礼包span>
div>
div>
body>
html>
2.6 层叠关系
2.6.1 元素层叠
2.6.2 z-index特点：
- z-index用来设置定位元素的层叠关系，非定位预算内无无效
- 取值可以为正整数、负整数和0
- 默认值为auto
2.6.3 比较原则
2.6.3.1 兄弟关系
- z-index越大，层叠越在上面
- z-index相等，写在后面的那个元素层叠在上面
2.6.3.2 如果不是兄弟关系
- 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
- 并且，这两个元素必须有设置z-index的具体数值
三、小结
3.1 对照表
各定位是否脱标及参照对象如下：
3.2 脱标元素特点
- 可以随意设置宽度和高度
- 宽高默认由内容决定
- 不再受标准流的约束
- 不再给父元素汇报宽高数据