在CSS中，有 标准流、浮动、定位 三种方式来为网页的布局提供支持
标准流： 它的使用最为普遍，他们根据自身的特性 （行内、块级、行内块） 各自占有网页中的一部分空间。
浮动： 它脱离了标准文档流，它的目的就是将多个块级元素并排放在一行，虽然它脱离了标准文档流，但是浮动元素中的内容 （文字、图片）还是在默认的文本流之内（浮动元素无法覆盖下方标准流中的文字）。因此定位才会被应用。
定位： 它将块级元素定在某一个位置，自由的漂浮在其他块级元素 （包括其中内容） 的上面
引例： 使用小div将大div盖住一部分，包括其中的文字！
解析： 在没有学习定位时，我们的思路一般是利用浮动，如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之定位</title>
<style type="text/css">
#upper {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
#lower {
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="upper"></div>
<div id="lower">我是世界第一等</div>
</body>
</html>
可实际结果却不尽如人意，是这样的：
虽然大盒子被上面浮动的小盒子盖住了，但是它里面的文字却被挤了出来，这显然没有达到我们题目的要求！然而定位的作用就在于此，它弥补了浮动布局的这个不足！！！
定位
定位由两部分组成：
定位 = 定位模式 （position） + 边偏移 （top、right、bottom、left）
定位模式（position）：
作用：
指定一个元素 （静态的，相对的，绝对或固定） 定位方法的类型
说明：
该属性要与边偏移属性配合使用才能完成定位的效果
常用值：
[static]： 默认值，没有定位，元素出现在正常的流中
[relative]： 生成相对定位的元素，相对于其正常位置进行定位
[absolute]： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
[fixed]： 生成固定定位的元素，相对于浏览器窗口进行定位
[sticky]： 粘性定位，该定位基于用户滚动的位置，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置
注意：
position：absolute、fixed 和 float 一样会隐式地改变display类型，不论之前什么类型的元素 （display:none除外），只要设置了position：absolute、fixed 或 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素
边偏移（top、right、bottom、left）：
作用：
对于使用绝对定位和相对定位的元素，边偏移属性设置单位 高于/低于 包含它的元素的指定方向的边
说明：
如果 “position：static”，底部的属性没有任何效果
常用值：
[top]： 设置单位 高于/低于 包含它的元素的上边
[right]： 设置单位 高于/低于 包含它的元素的右边
[bottom]： 设置单位 高于/低于 包含它的元素的底边
[left]： 设置单位 高于/低于 包含它的元素的左边
静态定位（static）：
特点：
1. 静态定位按照标准流特性摆放位置，它没有边偏移。
2. 静态定位在布局时我们几乎不用的
相对定位（relative）：
特点：
1. 相对于自己原来在标准流中位置利用边偏移来移动
2. 继续占有其在标准流的位置空间，后面的块级元素仍然以标准流的方式对待它
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之定位</title>
<style type="text/css">
#upper {
position: relative;
left: 500px;
width: 200px;
height: 200px;
background-color: pink;
}
#lower {
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="upper"></div>
<div id="lower">我是世界第一等</div>
</body>
</html>
绝对定位（absolute）：
特点：
1. 相对于自己的有定位属性（不包括static）的父级元素（没有层数限制）来移动，若所有父级元素都没有使用定位属性，那么它将以浏览器窗口为参考来移动
2. 不保留其原来在标准流中的位置，完全是脱标
3. 绝对定位和浮动一样都不会触发外边距合并
示例1：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之定位</title>
<style type="text/css">
#upper {
position: absolute;
left: 500px;
width: 200px;
height: 200px;
background-color: pink;
}
#lower {
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="upper"></div>
<div id="lower">我是世界第一等</div>
</body>
</html>
示例2：（父级元素无定位）
在只设置一个方向时，另一个方向默认为元素以标准流的方式所在父元素中的位置！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之定位</title>
<style type="text/css">
#inner {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: pink;
}
#outer {
width: 400px;
height: 400px;
margin: 200px auto;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
示例3：（父级元素有定位）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之定位</title>
<style type="text/css">
#inner {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: pink;
}
#outer {
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
固定定位（fixed）：
特点：
1. 不保留其原来在标准流中的位置，完全是脱标
2. 该定位利用浏览器可视窗口 + 边偏移属性来设置元素的位置，它跟父元素没有任何关系，单独使用不随滚动条滚动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之定位</title>
<style type="text/css">
#side {
position: fixed;
width: 100px;
height: 400px;
margin: 200px 0 0 100px;
font-size: 30px;
text-align: center;
background-color: skyblue;
}
#content {
width: 1000px;
height: 2000px;
margin-left: 300px;
background: linear-gradient(to bottom, red, orange, yellow, green, cyan, blue, purple);
}
</style>
</head>
<body>
<div id="side">
我<br/>是<br/>固<br/>定<br/>侧<br/>边<br/>栏
</div>
<div id="content">
<h1>我</h1>
<h1>是</h1>
<h1>文</h1>
<h1>章</h1>
<h1>内</h1>
<h1>容</h1>
<hr/>
<h1>我</h1>
<h1>是</h1>
<h1>文</h1>
<h1>章</h1>
<h1>内</h1>
<h1>容</h1>
<hr/>
<h1>我</h1>
<h1>是</h1>
<h1>文</h1>
<h1>章</h1>
<h1>内</h1>
<h1>容</h1>
<hr/>
<h1>我</h1>
<h1>是</h1>
<h1>文</h1>
<h1>章</h1>
<h1>内</h1>
<h1>容</h1>
</div>
</body>
</html>
粘性定位（sticky）：
特点：
1. 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
2. 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3之定位</title>
<style type="text/css">
.showdiv {
margin: 10px auto;
border: 1px solid;
font-size: 20px;
line-height: 30px;
}
#demo1,
#demo2 {
position: sticky;
height: 60px;
border-radius: 5px;
color: whitesmoke;
line-height: 60px;
}
#demo1 {
top: 0;
border: 3px solid darkgreen;
background-color: yellowgreen;
}
#demo2 {
bottom: 0;
border: 3px solid darkred;
background-color: red;
}
</style>
</head>
<body>
<div class="showdiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dicta est excepturi fuga hic, minima minus quae. Illo nesciunt, quia?</div>
<div class="showdiv">A ab asperiores autem consequuntur culpa dolore earum, eligendi facere hic iste laborum molestias odit quibusdam quod tenetur ut voluptatem.</div>
<div class="showdiv">Adipisci animi, aperiam consectetur consequatur distinctio eaque earum eligendi excepturi expedita id laborum modi nostrum nulla optio quis quod, reiciendis.</div>
<div class="showdiv">Ab assumenda dolorem excepturi incidunt quae quo ratione. Distinctio earum harum magni nesciunt, nulla quo repudiandae tempore tenetur veniam vitae.</div>
<div class="showdiv">Accusantium commodi distinctio dolor, dolores harum hic laborum maiores nemo neque, nihil, porro praesentium repudiandae rerum saepe similique tenetur voluptatibus.</div>
<div class="showdiv">Eveniet laborum maxime soluta vero. Debitis delectus laboriosam maxime placeat provident ratione reiciendis reprehenderit rerum saepe voluptas. Asperiores, impedit quaerat.</div>
<div class="showdiv">Aliquid architecto cum dignissimos, doloremque eveniet expedita facilis incidunt maiores minima non nostrum placeat quisquam repellendus sequi sunt veniam veritatis!</div>
<div class="showdiv">Adipisci atque, corporis esse eveniet in iure nihil optio sunt voluptate? Consequuntur deleniti dignissimos doloremque, incidunt magnam quia reiciendis velit?</div>
<div class="showdiv">Ab accusamus, assumenda at consequatur cum dolore est eveniet id, magni nulla odio optio, placeat possimus provident quam! Doloremque, expedita?</div>
<div id="demo1" class="showdiv">Architecto commodi corporis eos explicabo fuga ipsam molestiae nostrum officiis placeat qui quia, quibusdam, ratione sunt. Ab aperiam magnam ratione!</div>
<div class="showdiv">Deleniti eaque ex explicabo id magnam, maxime minus odio officia optio ratione vitae voluptatem. Aliquam culpa fugit molestias sint vel.</div>
<div class="showdiv">Aliquam dolorum eligendi perferendis praesentium saepe. Dignissimos nisi officia officiis perferendis repellendus rerum ut? Culpa cumque doloremque eligendi quod velit.</div>
<div class="showdiv">Assumenda consequuntur doloribus facilis, illum iusto laboriosam mollitia nulla numquam officia optio porro possimus provident quam, quas quia reiciendis vitae.</div>
<div class="showdiv">Cum dicta dolores eaque eum ex facilis fugit id ipsum maiores minima minus nam quae qui sed suscipit, tempore vitae.</div>
<div class="showdiv">Et nihil pariatur reprehenderit. Accusamus ad alias, beatae commodi dignissimos et ex illum mollitia possimus quo veritatis voluptate voluptatem voluptates?</div>
<div class="showdiv">A assumenda porro quisquam recusandae sequi suscipit, vitae! Asperiores atque dolor laborum molestias nostrum omnis optio sit suscipit totam voluptatum.</div>
<div class="showdiv">Accusamus cumque cupiditate eum modi nam nisi quas quasi qui, recusandae repellat. Illo impedit iusto quisquam rerum saepe suscipit velit.</div>
<div class="showdiv">Aperiam atque, debitis delectus, dicta eligendi explicabo illo maxime molestiae officia officiis perspiciatis praesentium provident quod reprehenderit saepe sapiente veritatis!</div>
<div class="showdiv">Ab asperiores dolores, fugit impedit labore laboriosam nostrum numquam, omnis perferendis provident quae quas quasi similique suscipit voluptas voluptates voluptatum.</div>
<div class="showdiv">Dolorem ducimus mollitia non quas voluptate. Doloribus in itaque labore modi molestias nobis quod veritatis! Illo necessitatibus pariatur rerum voluptatum.</div>
<div class="showdiv">Deserunt dicta, enim eos est explicabo impedit in laborum libero, nostrum omnis praesentium quia quod quos ratione, repellendus velit vitae!</div>
<div class="showdiv">Aliquid dicta ea error eveniet facilis hic iste, laudantium magni mollitia perferendis quae, quisquam ratione, repellendus saepe sequi totam vel.</div>
<div class="showdiv">Adipisci aliquam consequatur ducimus ex facilis hic illo, magni nemo nobis officiis omnis praesentium provident qui quibusdam quis vel, veniam.</div>
<div class="showdiv">Consectetur itaque labore nemo nihil obcaecati quibusdam repellat sed ullam unde vel. Beatae distinctio dolores fugiat ipsum velit. Facilis, natus.</div>
<div class="showdiv">Culpa debitis eum, explicabo facilis fugiat ipsa ipsam, itaque modi natus, odio officiis possimus quasi reprehenderit. Amet asperiores error hic.</div>
<div class="showdiv">Ab architecto dolore, error ex facilis modi nesciunt nisi nostrum ratione reiciendis sapiente sunt, tempora temporibus ut voluptate? Eos, officiis?</div>
<div class="showdiv">At commodi cupiditate distinctio dolore doloremque, ipsum magni molestiae mollitia pariatur quam quos rem saepe sint sit soluta sunt voluptatibus?</div>
<div id="demo2" class="showdiv">Maxime nostrum perferendis saepe unde. Aliquid beatae dolore dolorum exercitationem impedit laborum optio reiciendis? Aliquid earum illum quidem repudiandae sapiente</div>
<div class="showdiv">Autem dolores doloribus laboriosam nisi officiis quasi quibusdam sunt! Delectus deserunt doloribus excepturi, impedit laboriosam similique sit! Error, esse nisi?</div>
<div class="showdiv">Doloribus est nulla odit omnis sequi. A aperiam atque cumque dignissimos, distinctio ea, error eveniet numquam odit porro sapiente velit?</div>
<div class="showdiv">A delectus nam nesciunt nobis sunt? Architecto assumenda corporis delectus dolorem et, expedita ipsam nisi perspiciatis quae similique totam vel.</div>
<div class="showdiv">Atque dicta doloribus fuga minima minus soluta temporibus. Ducimus explicabo fugiat molestias voluptate voluptatibus? At expedita ipsa maiores molestias necessitatibus!</div>
<div class="showdiv">Ab aut commodi cumque dicta earum eius enim facere fugiat harum id in laboriosam, non perspiciatis quam qui veniam voluptatem.</div>
<div class="showdiv">Aspernatur assumenda aut dolorum eius esse expedita libero minus, modi quae quaerat, qui rem reprehenderit repudiandae sed temporibus velit voluptatibus?</div>
<div class="showdiv">Aliquam aliquid error libero nam, nisi repellendus suscipit veniam! Alias aliquam aliquid consectetur consequatur eveniet inventore natus numquam sit ullam</div>
<div class="showdiv">At consectetur eos hic in possimus provident quibusdam quod reiciendis reprehenderit repudiandae rerum temporibus, totam. Ab nesciunt numquam quos veritatis!</div>
<div class="showdiv">Aspernatur at dolorum ducimus eaque eos error, eveniet, laboriosam molestiae natus nemo quo ratione tenetur unde. Dolorum facilis fugiat nulla.</div>
</body>
</html>
用法
绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置
margin: auto设置水平居中。
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；margin-left: -50px;：让盒子向左移动自身宽度的一半。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3之定位</title>
<style type="text/css">
#showdiv {
position: relative;
width: 1400px;
height: 400px;
margin: 100px auto;
background-color: skyblue;
}
#posdiv {
position: absolute;
left: 50%;
width: 100px;
height: 300px;
margin: 50px 0 0 -50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="showdiv">
<div id="posdiv"></div>
</div>
</body>
</html>
子绝父相
子级是绝对定位，父级要用相对定位
子绝父相是使用绝对定位的口诀，要牢牢记住
父级要占有位置，子级要任意摆放，这就是子绝父相的由来
综合示例：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3之定位</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#loop {
position: relative;
width: 520px;
height: 280px;
margin: 200px auto;
}
#left,
#right,
#bottom {
position: absolute;
background-color: rgba(0, 0, 0, .1);
user-select: none;
}
#left,
#right {
top: 50%;
width: 30px;
height: 60px;
margin-top: -30px;
color: lightgray;
font-size: 20px;
text-align: center;
line-height: 58px;
}
#left {
left: 0;
border-radius: 0 30px 30px 0;
}
#right {
right: 0;
border-radius: 30px 0 0 30px;
}
#bottom {
bottom: 5px;
left: 50%;
width: 80px;
height: 16px;
margin-left: -40px;
border-radius: 20px;
}
#bottom li {
float: left;
width: 12px;
height: 12px;
margin-top: 2px;
margin-left: 10px;
border-radius: 6px;
list-style: none;
background-color: lightgray;
}
#left:hover,
#right:hover,
#bottom:hover {
color: whitesmoke;
background-color: rgba(0, 0, 0, .5);
cursor: pointer;
transition: 120ms;
}
#bottom li:hover {
transition: 120ms;
background-color: whitesmoke;
}
</style>
</head>
<body>
<div id="loop">
<div id="left"><b>> </b></div>
<div id="right"><b>< </b></div>
<ul id="bottom">
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
</ul>
<img src="img/taobao.jpg" alt="">
</div>
</body>
</html>
扫一扫
740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
