<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位布局</title>
<style>
/*正常的html文档流是从上往下、从左往右排列。*/
/*页面排版时想要元素之间相互影响，使用标准的浮动、文档流即可。*/
/*定位的元素位置固定，位置不受其它元素影响，定位主要应用于页面中轮播图、叠加元素、菜单，移动端的浮动组件等处。*/
/*相对定位*/
/*相对定位是相对于元素原来的位置控制，当元素发生位置偏移时，原位置留白。*/
/*使用position来定位操作元素，relative进行相对定位，保留该元素原来的空间占位，使用top、bottom、left、right等属性控制相对原来空间位的偏移。*/
/*绝对定位*/
/*绝对定位不受文档流影响，就像漂浮在页面中的精灵，绝对定位元素拥有行内块特性。*/
/*如果父级元素设置了 relative | fixed | sticky ，绝对定位子元素将参照此父元素进行定位。*/
/*使用position来定位操作元素，absolute进行绝对定位，不保留该元素原来的空间占位，使用top、bottom、right等属性控制偏移时，如果父级元素没有定
位，则参照文档页面进行偏移；如果父级元素有定位（不论何种定位），则参照父级元素进行定位。*/
/*补充*/
/*如果没有为定位元素设置偏移，将受父元素的padding等属性影响。但使用定位一般都会设置偏移位置。*/
/*1.使用相对定位操作元素*/
/*div {*/
/* width: 500px;*/
/* height: 500px;*/
/* border: 5px solid blueviolet;*/
/* padding: 30px;*/
/*}*/
/*div img {*/
/* width: 50px;*/
/* height: 50px;*/
/* position: relative;*/
/* !*left: 550px;*!*/
/* !*top: -30px;*!*/
/* right: 20px;*/
/* bottom: -100px;*/
/*}*/
/*2.使用绝对定位操作元素*/
/*div {*/
/* width: 500px;*/
/* height: 500px;*/
/* border: 5px solid blueviolet;*/
/* padding: 30px;*/
/*}*/
/*div img {*/
/* width: 50px;*/
/* height: 50px;*/
/* position: absolute;*/
/* !*left: 600px;*!*/
/* !*top: 200px;*!*/
/* right: 600px;*/
/* bottom: 100px;*/
/*}*/
/*3.通过定位设置尺寸*/
/*绝对定位的div在参照父元素(已经设置了定位)进行定位时，如果没有定义宽高，则可以通过left/top或right/bottom来设置尺寸，也可以通过border-radius等设置形状*/
/*article {*/
/* width: 400px;*/
/* height: 400px;*/
/* border: solid 10px blueviolet;*/
/* margin: 100px;*/
/* position: relative;*/
/* overflow: hidden;*/
/*}*/
/*article div {*/
/* background-color: greenyellow;*/
/* !*width: 200px;*!*/
/* !*height: 200px;*!*/
/* position: absolute;*/
/* left: 300px;*/
/* top: 100px;*/
/* right: -100px;*/
/* bottom: 100px;*/
/* border-radius: 50%;*/
/*}*/
/*4.控制元素居中定位的几种方式*/
/*article {*/
/* border: solid 8px blueviolet;*/
/* width: 400px;*/
/* height: 400px;*/
/* margin: 100px;*/
/* position: relative;*/
/*}*/
/*article div {*/
/* background-color: greenyellow;*/
/* width: 200px;*/
/* height: 200px;*/
/* !*方式一: 父宽减自宽除以2为left偏移量，top偏移同*!*/
/* !*left: 100px;*!*/
/* !*top: 100px;*!*/
/* !*方式二: 用left和top均偏移50%把左顶点偏移至中心点，然后通过设置margin把div顶到中心*!*/
/* left: 50%;*/
/* top: 50%;*/
/* margin-left: -100px;*/
/* margin-top: -100px;*/
/* position: absolute;*/
/*}*/
/*5.多级定位的注意事项*/
/*绝对定位子元素的定位参照只依据离他最近的已经定位的父级元素。*/
/*article {*/
/* border: solid 8px blueviolet;*/
/* width: 400px;*/
/* height: 400px;*/
/* margin: 100px;*/
/* position: relative;*/
/*}*/
/*article section {*/
/* width: 100%;*/
/* height: 100%;*/
/* background-color: #ddd;*/
/* position: relative;*/
/* left: 100px;*/
/* top: 100px;*/
/*}*/
/*article section div {*/
/* background-color: greenyellow;*/
/* width: 200px;*/
/* height: 200px;*/
/* left: 50%;*/
/* top: 50%;*/
/* margin-left: -100px;*/
/* margin-top: -100px;*/
/* position: absolute;*/
/*}*/
/*6.滚动对定位元素的影响*/
/*绝对定位子元素的其相对定位的父元素设置了overflow: scroll时，子元素会随着页面滚动而移动*/
/*article {*/
/* border: 8px solid blueviolet;*/
/* width: 400px;*/
/* height: 400px;*/
/* margin: 100px;*/
/* position: relative;*/
/* overflow: scroll;*/
/*}*/
/*section {*/
/* height: 3000px;*/
/* background-color: #ddd;*/
/*}*/
/*article section div {*/
/* background-color: red;*/
/* width: 200px;*/
/* height: 200px;*/
/* bottom: 0;*/
/* left: 0;*/
/* position: absolute;*/
/*}*/
/*7.图标定位案例操作*/
/*body {*/
/* padding: 100px;*/
/*}*/
/*ul {*/
/* list-style-type: none;*/
/*}*/
/*ul li {*/
/* width: 300px;*/
/* border: solid 8px blueviolet;*/
/* overflow: hidden;*/
/* position: relative;*/
/*}*/
/*ul li img {*/
/* width: 100%;*/
/* float: left;*/
/*}*/
/*ul li > span {*/
/* position: absolute;*/
/* width: 30px;*/
/* height: 30px;*/
/* background-color: blueviolet;*/
/* border-radius: 50%;*/
/* text-align: center;*/
/* font-size: 14px;*/
/* color: white;*/
/* line-height: 2em;*/
/* left: 10px;*/
/* top: 10px;*/
/* box-shadow: 0 0 10px #333;*/
/*}*/
/*8.定位叠加很重要*/
/*使用z-index:正负数控制定位元素叠加层级，数越大越前景。对绝对定位和相对定位都有效*/
/*配合hover使用可实现图层变换效果*/
/** {*/
/* padding: 0;*/
/* margin: 0;*/
/*}*/
/*body {*/
/* padding: 100px;*/
/*}*/
/*ul {*/
/* list-style-type: none;*/
/*}*/
/*ul li {*/
/* width: 300px;*/
/* border: solid 8px blueviolet;*/
/* position: relative;*/
/* cursor: pointer;*/
/* overflow: hidden;*/
/*}*/
/*ul li:hover img {*/
/* z-index: -2;*/
/*}*/
/*ul li img {*/
/* width: 100%;*/
/* position: relative;*/
/* float: left;*/
/* z-index: 2;*/
/*}*/
/*ul li > span {*/
/* position: absolute;*/
/* width: 30px;*/
/* height: 30px;*/
/* background-color: blueviolet;*/
/* border-radius: 50%;*/
/* text-align: center;*/
/* font-size: 14px;*/
/* color: white;*/
/* line-height: 2em;*/
/* left: 10px;*/
/* top: 10px;*/
/* box-shadow: 0 0 10px #333;*/
/* z-index: 3;*/
/*}*/
/*ul li div {*/
/* width: 100%;*/
/* background-color: #ddd;*/
/* position: absolute;*/
/* z-index: 1;*/
/*}*/
/*ul li div h2 {*/
/* text-align: center;*/
/* line-height: 7em;*/
/* color: white;*/
/*}*/
/*9.京东商城购物车部件*/
/** {*/
/* padding: 0;*/
/* margin: 0;*/
/*}*/
/*body {*/
/* padding-left: 200px;*/
/* padding-top: 200px;*/
/*}*/
/*article {*/
/* width: 150px;*/
/* position: relative;*/
/* font-size: 14px;*/
/* color: #555;*/
/* cursor: pointer;*/
/*}*/
/*article div {*/
/* height: 50px;*/
/* border: 1px solid #ddd;*/
/* text-align: center;*/
/* line-height: 3.5em;*/
/*}*/
/*article:hover div:nth-of-type(1) {*/
/* border-bottom: none;*/
/* border-color: blueviolet;*/
/*}*/
/*article:hover div:nth-of-type(2) {*/
/* display: block;*/
/* border-color: blueviolet;*/
/*}*/
/*article div:nth-of-type(1) {*/
/* background-color: #fff;*/
/* position: relative;*/
/* z-index: 2;*/
/*}*/
/*article div:nth-of-type(2) {*/
/* width: 300px;*/
/* position: absolute;*/
/* right: 0;*/
/* top: 50px;*/
/* display: none;*/
/*}*/
/*10.固定定位*/
/*position: fixed相对于页面进行定位，应用于页面固定位置显示的元素，比如菜单栏，广告位等*/
/*后出现的元素有相对定位时权重会更高，导致固定定位效果丢失，可通过设置较大数值的z-index解决*/
/** {*/
/* padding: 0;*/
/* margin: 0;*/
/*}*/
/*div {*/
/* position: fixed;*/
/* left: 0;*/
/* top: 0;*/
/* right: 0;*/
/* height: 60px;*/
/* border-bottom: solid 5px blueviolet;*/
/* box-shadow: 0 5px 10px #555;*/
/* background-color: white;*/
/* !*增加层级*!*/
/* z-index: 9999;*/
/*}*/
/*article {*/
/* !*后出现的定位权重高，把前面的定位盖住*!*/
/* position: relative;*/
/* height: 3000px;*/
/* background-color: greenyellow;*/
/* margin-top: 80px;*/
/*}*/
/*11.粘性定位*/
/*position: sticky粘性定位，在最近的祖元素有溢出滚动设置时有效，配合top等设置使用*/
/*设置粘性的定位的元素如果在同级，则呈现叠加效果；如果在不同级，则前一个会被后一个顶走*/
/* body {*/
/* padding: 50px;*/
/* margin: 50px;*/
/* }*/
/* div {*/
/* width: 400px;*/
/* height: 200px;*/
/* border: 6px solid cornflowerblue;*/
/* overflow: scroll;*/
/* }*/
/* div h2:nth-of-type(even) {*/
/* background-color: #333;*/
/* }*/
/*div h2 {*/
/* background-color: blueviolet;*/
/* color: white;*/
/* position: sticky;*/
/* top: 0;*/
/* }*/
/*div p {*/
/* padding-bottom: 50px;*/
/*}*/
</style>
</head>
<body>
<!--1.使用相对定位操作元素-->
<!--<div>-->
<!-- <img src="flower.jpg" alt="flower.jpg" />-->
<!-- Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!-- 发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!-- 收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!-- 克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!-- aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!-- 出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!-- 的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半-->
<!-- 年发布一个二级版本（即从a.x升级到a.y）。-->
<!--</div>-->
<!--2.使用绝对定位操作元素-->
<!--<div>-->
<!-- <img src="flower.jpg" alt="flower.jpg" />-->
<!-- Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!-- 发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!-- 收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!-- 克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!-- aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!-- 出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!-- 的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半-->
<!-- 年发布一个二级版本（即从a.x升级到a.y）。-->
<!--</div>-->
<!--3.通过定位设置尺寸-->
<!--<article>-->
<!-- <div></div>-->
<!--</article>-->
<!--4.控制元素居中定位的几种方式-->
<!--<article>-->
<!-- <div></div>-->
<!--</article>-->
<!--5.多级定位的注意事项-->
<!--<article>-->
<!-- <section>-->
<!-- <div></div>-->
<!-- </section>-->
<!--</article>-->
<!--6.滚动对定位元素的影响-->
<!--<article>-->
<!-- <section>-->
<!-- <div></div>-->
<!-- </section>-->
<!--</article>-->
<!--7.图标定位案例操作-->
<!--<ul>-->
<!-- <li>-->
<!-- <span>热</span>-->
<!-- <img src="flower.jpg" alt="flower.jpg">-->
<!-- </li>-->
<!--</ul>-->
<!--8.定位叠加很重要-->
<!--<ul>-->
<!-- <li>-->
<!-- <span>热</span>-->
<!-- <img src="flower.jpg" alt="flower.jpg">-->
<!-- <div>-->
<!-- <h2>定位操作布局</h2>-->
<!-- </div>-->
<!-- </li>-->
<!--</ul>-->
<!--9.京东商城购物车部件-->
<!--<article>-->
<!-- <div>我的购物车</div>-->
<!-- <div>购物车中暂无商品</div>-->
<!--</article>-->
<!--10.固定定位-->
<!--<div></div>-->
<!--<article></article>-->
<!--11.粘性定位-->
<!--<div>-->
<!-- <h2>go语言</h2>-->
<!-- <p>-->
<!-- Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。-->
<!-- </p>-->
<!-- <h2>html语言</h2>-->
<!-- <p>-->
<!-- HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。-->
<!-- </p>-->
<!-- <h2>css语言</h2>-->
<!-- <p>-->
<!-- 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。-->
<!-- </p>-->
<!-- <h2>js语言</h2>-->
<!-- <p>-->
<!-- 全面系统的讲解JAVASCRIPT（ES）编程语言，ECMASCRIPT系统课程含盖 es5 / es6 / es7 / es8 等知识点。-->
<!-- </p>-->
<!--</div>-->
</body>
</html>
浙公网安备 33010602011771号