1. 相对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
/*
相对于自己原来的位置
特点：
1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响
2.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
默认规则：
定位的元素会盖在普通元素之上
都发生定位的两个元素，后写的元素会盖在先写的元素之上
3.left不能和right一起使用，top与bottom同理
4.相对定位的元素，也能继续浮动（不推荐）
5.相对定位的元素，也能通过margin调整位置（不推荐）
注：绝大多数情况下，相对定位会与绝对定位一起使用
*/
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
position: relative;
left: 50px;
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>2. 绝对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
/*
如何设置：
给元素设置position: absolute
可以使用left、right、top、bottom四个属性调整位置
绝对定位的参考点在哪里
参考它的包含块：
1.对于没有脱离文档流的元素：包含块就是父元素
2.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）
绝对定位元素的特点：
1.脱离文档流，会对后面的兄弟元素、父元素有影响
2.left和right不能同时使用，同理相对定位
3.绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
4.绝对定位的元素也能通过margin调整位置（不推荐）
5.无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素
什么是定位元素：默认宽高都被内容所撑开，且能自由设置宽高（参考例子中的box2 span元素设置为定位元素后）
*/
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
position: relative;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
position: absolute;
top: 220px;
left: 20px;
transition: 1s all linear;
}
.box3 {
background-color: green;
}
.outer:hover .box2 {
left: 220px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<span class="box box2">2</span>
<div class="box box3">3</div>
</div>
</body>
</html>3. 固定定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
/*
如何设置：
给元素设置position: fixed
可以使用left、right、top、bottom四个属性调整位置
绝对定位的参考点在哪里
参考它的视口：
什么是视口？对于PC浏览器来说，视口就是我们看网页的那扇“窗户”
固定定位元素的特点：
1.脱离文档流，会对后面的兄弟元素、父元素有影响
2.left和right不能同时使用，同理相对定位
3.固定定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
4.固定定位的元素也能通过margin调整位置（不推荐）
5.无论是什么元素（行内、行内块、块级）设置为绝固定位之后，都变成了定位元素
*/
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
position: fixed;
top: 0;
left: 0
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas totam quidem ipsum neque, eos reiciendis dolorum, nam repellat dolore saepe deserunt officiis iure perferendis provident. Quaerat earum cupiditate, tempore vitae quidem provident? Tenetur assumenda harum perferendis quisquam corrupti inventore ab aliquam minus sit exercitationem distinctio animi soluta reprehenderit eligendi quaerat iste consequatur fugiat, tempore excepturi doloremque adipisci quod fuga ut? Delectus dignissimos veritatis facere vel atque eveniet at, aspernatur repudiandae inventore dolore magnam quam mollitia modi sit. Similique, molestias natus magnam, id neque asperiores tempora amet quas perspiciatis alias reprehenderit voluptate non perferendis nulla aut maiores. Maxime, odio libero recusandae quae, expedita hic dolor soluta rerum culpa accusantium quibusdam inventore, esse temporibus veritatis. Tenetur, rerum, ipsam, praesentium iure molestiae asperiores quis voluptatibus totam odit ipsum aliquam autem! Ab, sit ratione, molestias animi repellat deserunt eligendi cumque in dolore a recusandae reprehenderit quae nemo repellendus ex autem amet omnis blanditiis soluta, accusantium temporibus? Nesciunt laboriosam temporibus, sequi doloremque quos deleniti voluptatum dolores. Doloribus aspernatur velit delectus quos. Doloribus in nobis ex, eius quidem odit assumenda ea nihil eveniet commodi exercitationem, modi officia necessitatibus eaque architecto, repellat dolor incidunt rerum odio veritatis voluptatum impedit consequuntur unde. Inventore pariatur quas voluptatem impedit et at aut similique sed, placeat error obcaecati nemo vero necessitatibus provident quod totam soluta deserunt dignissimos perspiciatis accusantium sequi esse voluptates. Sint odio dolorum quasi beatae soluta officiis tenetur natus ea repellendus necessitatibus, expedita eius atque vel aperiam possimus, ipsam placeat iure animi ad obcaecati impedit quod corporis ipsum ratione. A beatae molestias veritatis, harum corporis quas rerum fugit, odit voluptatem necessitatibus pariatur perspiciatis ipsam libero dolores consectetur, sequi expedita temporibus dolore. Ducimus neque minima perferendis numquam rem natus repellat voluptas dicta magnam in incidunt perspiciatis aliquid, nemo ullam quasi velit nostrum modi. Nihil tempora exercitationem asperiores iusto dolorum dicta, quam sint ea eius culpa dolor consequatur. Ipsam cupiditate nesciunt porro necessitatibus qui laboriosam repellendus quos laborum recusandae mollitia illo blanditiis omnis vitae facilis nobis adipisci repudiandae minus architecto, voluptas provident tenetur, obcaecati veniam dolore voluptatibus! Perferendis et praesentium id magnam voluptate voluptates vel unde quaerat facilis ullam quasi, laborum temporibus officia repellat expedita, minus ut, corrupti sequi. Minus ex impedit quasi dignissimos ullam dolores unde totam deserunt, est soluta esse delectus, voluptatum illo, error in voluptatibus autem accusantium provident nemo! Nobis, est. Autem et voluptatum, explicabo, impedit deserunt dignissimos eligendi quas ab id quidem dolorum debitis laudantium a numquam est unde excepturi assumenda vero enim eum quisquam similique reprehenderit. Porro aliquid provident animi ipsum debitis repellendus corrupti amet vitae facere ab nulla mollitia quas doloremque numquam laudantium a voluptate nostrum, voluptas accusantium at. Accusamus distinctio debitis nobis sunt ad aut obcaecati vitae dolores quibusdam soluta repellat consequatur veritatis incidunt, eos voluptates laudantium inventore, libero explicabo. Dignissimos maiores cumque quam sunt id recusandae doloremque ipsam vero soluta. Molestiae, exercitationem nobis nisi repudiandae, dicta magnam fuga et aliquam aliquid, illo sapiente mollitia est aspernatur placeat earum corporis ipsam blanditiis in ex obcaecati! Consequatur impedit voluptas pariatur, corrupti perspiciatis quasi facere expedita tenetur adipisci enim quidem delectus? Cupiditate assumenda praesentium vero nesciunt, error est? Tempora, saepe. Earum a aperiam vitae, tempora labore nesciunt excepturi sit neque itaque voluptatibus est ducimus nihil cupiditate quisquam. Nesciunt ad pariatur maxime nisi consectetur aspernatur ullam inventore iusto omnis animi assumenda, ducimus alias quibusdam cumque vel molestias ipsum exercitationem molestiae perspiciatis porro, hic vero placeat. Optio veritatis nemo consequuntur voluptates aspernatur sapiente totam iste corporis quibusdam officiis fugiat doloremque explicabo dicta mollitia eveniet, accusantium dolore quia voluptatem, voluptas dolores rem minima sunt. Hic necessitatibus nulla minima magnam animi distinctio ea illum suscipit harum dignissimos commodi aperiam officiis, sit corporis, unde nesciunt vitae debitis asperiores atque eaque consequuntur architecto eum? Aspernatur, nihil totam. Eos asperiores, officiis repudiandae corporis repellat expedita inventore neque enim laudantium magnam pariatur reprehenderit impedit voluptate vel laboriosam porro, labore molestias quisquam libero ad cupiditate blanditiis delectus illo! Dignissimos veniam accusantium, esse optio, nemo consectetur ab dolor eum molestiae itaque laudantium assumenda aperiam placeat obcaecati labore accusamus dolores doloribus? Deserunt consectetur sit a, reprehenderit aut sequi dignissimos optio sapiente enim nulla nesciunt libero nam dolor velit pariatur. Unde corrupti omnis officia. Vero amet maxime repellat adipisci repellendus voluptates eveniet, quos cumque eligendi consequuntur officia fuga sapiente odit labore ipsa obcaecati nemo similique, aspernatur delectus. Laudantium iste necessitatibus suscipit nobis architecto perferendis velit repellendus cum illum quos quo dolores ipsum repellat, tenetur fuga, dolor ab numquam animi cupiditate culpa. Adipisci neque amet sequi? Nemo atque perspiciatis dolor maiores corrupti. Provident at adipisci dignissimos alias enim! Natus doloribus odio molestias atque quae quasi saepe ipsa eum deserunt laudantium quos deleniti molestiae porro accusantium, iste architecto dolorem nemo ab! Ipsa ullam ducimus eaque hic itaque commodi! Consequuntur ea consequatur expedita, porro excepturi perspiciatis eos voluptatem impedit deleniti aperiam facilis voluptate labore atque quas eius. Omnis aliquid modi eius reprehenderit accusantium explicabo officia ratione vitae, dicta, nesciunt repellendus molestias, earum itaque magnam laborum deleniti minus labore repellat quibusdam quae sit perspiciatis inventore repudiandae. Amet minus nihil nobis blanditiis porro facilis repudiandae quo illum, quas quam est quisquam praesentium labore delectus. Nihil dolorem illo tenetur minima minus eum sunt in mollitia non! Dignissimos, temporibus officiis eum minus molestias explicabo laudantium consectetur molestiae possimus, itaque velit quidem corrupti nemo natus laborum fugit exercitationem sit necessitatibus ducimus saepe hic quos! Consequatur voluptate rem laborum amet ratione, doloremque ea, ullam error voluptatibus temporibus, velit iusto praesentium repellendus modi facere non cupiditate corrupti nam autem provident tempora? Nam porro dolorem alias dolorum culpa tenetur aperiam maiores sunt quasi eius laudantium minus eos deleniti exercitationem doloribus similique ipsa, maxime labore voluptate. Commodi architecto consequatur nesciunt odio incidunt atque facilis minus voluptatibus ea repellat harum quibusdam molestias illo, animi itaque at veritatis soluta quidem? Aut, molestias aliquid atque, sunt nulla, autem recusandae quae tempora nisi ducimus accusantium provident veritatis. Harum at inventore velit illo quia amet reiciendis nulla nam dignissimos est? Natus, mollitia odio! Repudiandae ad eligendi similique dolor. Exercitationem quas, non sint reprehenderit omnis magnam, hic repellat beatae odio illo porro saepe alias maiores accusantium.</div>
</body>
</html>4. 粘性定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>粘性定位</title>
<style>
/*
如何设置：
给元素设置position: sticky
可以使用left、right、top、bottom四个属性调整位置，不过最常用的是top
参考点在哪里？
离它最近的一个拥有“滚动机制”的祖先元素（胶水粘住的点），即便这个祖先不是最近的真实可滚动祖先
特点：
1.不脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
2.最常用的值是top
3.粘性定位和浮动可以同时设置，但不推荐
4.粘性定位也能通过margin调整位置，但不推荐
粘性定位和相对定位的特点基本一致，不同的是，粘性定位可以在元素到达某个位置时将其固定
*/
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
.page-header {
height: 100px;
text-align: center;
line-height: 100px;
background-color: orange;
font-size: 20px;
}
.item {
background-color: gray;
}
.first {
background-color: skyblue;
font-size: 40px;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="page-header">头部</div>
<!-- 内容 -->
<div class="content">
<div class="item">
<div class="first">A</div>
<h2>A1</h2>
<h2>A2</h2>
<h2>A3</h2>
<h2>A4</h2>
<h2>A5</h2>
<h2>A6</h2>
<h2>A7</h2>
<h2>A8</h2>
</div>
<div class="item">
<div class="first">B</div>
<h2>B1</h2>
<h2>B2</h2>
<h2>B3</h2>
<h2>B4</h2>
<h2>B5</h2>
<h2>B6</h2>
<h2>B7</h2>
<h2>B8</h2>
</div>
<div class="item">
<div class="first">C</div>
<h2>C1</h2>
<h2>C2</h2>
<h2>C3</h2>
<h2>C4</h2>
<h2>C5</h2>
<h2>C6</h2>
<h2>C7</h2>
<h2>C8</h2>
</div>
</div>
</body>
</html>5. 定位的层级
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位的层级</title>
<style>
/*
1.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
2.如果位置发生重叠，默认情况是：后面的元素会显示在前面的元素之上
3.可以通过css属性z-index调整元素的显示层级
4.z-index的属性值是数字，没有单位，数字越大，层级越高
5.只有定位的元素，设置z-index才有效
6.如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，请检查其 包含块 的层级
*/
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
position: relative;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
position: relative;
top: -130px;
left: 50px;
}
.box3 {
background-color: green;
position: absolute;
top: 130px;
left: 130px;
}
.box4 {
background-color: red;
position: fixed;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div>
</body>
</html>6. 定位可以越过padding
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位可以越过padding</title>
<style>
.outer {
width: 800px;
height: 800px;
padding: 20px;
background-color: gray;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>6. 定位的特殊应用一
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位的特殊应用1</title>
<style>
/*
定位的特殊应用：
1.发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高
2.发生相对定位后，元素依然是之前的显示模式，不脱离文档流
3.以下所说的特殊应用只针对 绝对定位、固定定位 元素，不包括相对定位元素
*/
.outer {
height: 400px;
background-color: gray;
position: relative;
}
.inner {
background-color: orange;
font-size: 20px;
padding: 2dvb;
border: 5px solid black;
position: absolute;
/* 让定位元素充满包含块，宽：同时设置left right为0，高同理 */
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">带带大师兄</div>
</div>
</body>
</html>8. 定位的特殊应用二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位的特殊应用2</title>
<style>
.outer {
width: 800px;
height: 400px;
background-color: gray;
position: relative;
}
.inner {
width: 400px;
height: 100px;
background-color: orange;
font-size: 20px;
position: absolute;
/* 让定位元素在包含块中居中 */
/* 方案一：推荐使用 */
/* top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; */
/* 方案二 */
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -50px;
/* 注：以上两种方案，儿子必须有宽高才行 */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">带带大师兄</div>
</div>
</body>
</html>
评论 (0)