建设网站的目的以及意义,童美童程儿童编程价格,商城类网站建设方案,怎么制作网站软件下载定位 1. 相对定位1.1 如何设置相对定位#xff1f;1.2 相对定位的参考点在哪里#xff1f;1.3 相对定位的特点#xff1a; 2. 绝对定位2.1 如何设置绝对定位#xff1f;2.2 绝对定位的参考点在哪里#xff1f;2.3 绝对定位元素的特点#xff1a; 3. 固定定位3.1 如何设置… 定位 1. 相对定位1.1 如何设置相对定位1.2 相对定位的参考点在哪里1.3 相对定位的特点 2. 绝对定位2.1 如何设置绝对定位2.2 绝对定位的参考点在哪里2.3 绝对定位元素的特点 3. 固定定位3.1 如何设置为固定定位3.2 固定定位的参考点在哪里3.3 固定定位元素的特点 4. 粘性定位4.1 如何设置为粘性定位4.2 粘性定位的参考点在哪里4.3 粘性定位元素的特点 5. 定位层级6. 定位的特殊应用6.1 让定位元素的宽充满包含块6.2 让定位元素在包含块中居中 1. 相对定位
1.1 如何设置相对定位
给元素设置 position:relative 即可实现相对定位。可以使用 left 、right 、top 、bottom四个属性调整位置。
1.2 相对定位的参考点在哪里
相对自己原来的位置
1.3 相对定位的特点
不会脱离文档流元素位置的变化只是视觉效果上的变化不会对其他元素产生任何影响。定位元素的显示层级比普通元素高无论什么定位显示层级都是一样的。 默认规则是 定位的元素会盖在普通元素之上。都发生定位的两个元素后写的元素会盖在先写的元素之上。 left不能和 right 一起设置top 不能和bottom 一起设置。相对定位的元素也能继续浮动但不推荐这样做。相对行为的元素也能通过margin 调整位置但不推荐这样做。 注意绝大多数情况下相对定位会与绝对定位配合使用。 2. 绝对定位
2.1 如何设置绝对定位
给元素设置 position: absolute 即可实现绝对定位。可以使用 left 、right 、top 、bottom 四个属性调整位置。
2.2 绝对定位的参考点在哪里
参考它的包含块。 什么是包含块 对于没有脱离文档流的元素包含块就是父元素对于脱离文档流的元素包含块是第一个拥有定位属性的祖先元素如果所有祖先都没定位那包含块就是整个页面。 2.3 绝对定位元素的特点
脱离文档流会对后面的兄弟元素、父元素有影响。left不能和 right 一起设置top 不能和bottom 一起设置。绝对定位、浮动不能同时设置如果同时设置浮动失效以定位为主。绝对定位的元素也能通过margin 调整位置但不推荐这样做。无论是什么元素行内、行内块、块级设置为绝对定位之后都变成了定位元素。 何为定位元素 —— 默认宽、高都被内容所撑开且能自由设置宽高。 3. 固定定位
3.1 如何设置为固定定位
给元素设置 position: fixed 即可实现固定定位。可以使用 left 、right 、top 、bottom 四个属性调整位置。
3.2 固定定位的参考点在哪里
参考它的视口 什么是视口—— 对于PC浏览器来说视口就是我们看网页的那扇“窗户”。 3.3 固定定位元素的特点
脱离文档流会对后面的兄弟元素、父元素有影响。left 不能和 right 一起设置top 不能和bottom 一起设置。固定定位和浮动不能同时设置如果同时设置浮动失效以固定定位为主。固定定位的元素也能通过margin 调整位置但不推荐这样做。无论是什么元素行内、行内块、块级设置为固定定位之后都变成了定位元素
4. 粘性定位
4.1 如何设置为粘性定位
给元素设置 position:sticky 即可实现粘性定位。可以使用 left 、right 、top 、bottom 四个属性调整位置不过最常用的是top 值。
4.2 粘性定位的参考点在哪里
离它最近的一个拥有“滚动机制”的祖先元素即便这个祖先不是最近的真实可滚动祖先父元素高度大于子元素高度但父元素设置了overflow:scroll。
4.3 粘性定位元素的特点
不会脱离文档流它是一种专门用于窗口滚动时的新的定位方式。最常用的值是top 值。粘性定位和浮动可以同时设置但不推荐这样做。粘性定位的元素也能通过margin 调整位置但不推荐这样做。 粘性定位和相对定位的特点基本一致不同的是粘性定位可以在元素到达某个位置时将其固定。 案例代码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title粘性定位/titlestyle* {margin: 0;padding: 0;}body {height: 2000px;}.page-header {height: 100px;text-align: center;line-height: 100px;background-color: orange;font-size: 20px;}/* .content { *//* height: 200px; *//* overflow: auto; *//* overflow: scroll; *//* } */.item {background-color: gray;}.first {background-color: skyblue;font-size: 40px;position: sticky;top: 0px;/* float: right; *//* margin-right: 100px; */}/style
/head
body!-- 头部 --div classpage-header头部/div!-- 内容区 --div classcontent!-- 每一项 --div classitemdiv classfirstA/divh2A1/h2h2A2/h2h2A3/h2h2A4/h2h2A5/h2h2A6/h2h2A7/h2h2A8/h2/divdiv classitemdiv classfirstB/divh2B1/h2h2B2/h2h2B3/h2h2B4/h2h2B5/h2h2B6/h2h2B7/h2h2B8/h2/divdiv classitemdiv classfirstC/divh2C1/h2h2C2/h2h2C3/h2h2C4/h2h2C5/h2h2C6/h2h2C7/h2h2C8/h2/div/div
/body
/html5. 定位层级
定位元素的显示层级比普通元素高无论什么定位显示层级都是一样的。如果位置发生重叠默认情况是后面的元素会显示在前面元素之上。可以通过 css 属性 z-index 调整元素的显示层级。z-index 的属性值是数字没有单位值越大显示层级越高。只有定位的元素设置 z-index 才有效。如果z-index 值大的元素依然没有覆盖掉z-index 值小的元素那么请检查其包含块的层级。
6. 定位的特殊应用 注意 发生固定定位、绝对定位后元素都变成了定位元素默认宽高被内容撑开且依然可以设置宽高。发生相对定位后元素依然是之前的显示模式。以下所说的特殊应用只针对 绝对定位 和 固定定位 的元素不包括相对定位的元素。 6.1 让定位元素的宽充满包含块
块宽想与包含块一致可以给定位元素同时设置 left 和 right为 0。高度想与包含块一致top 和 bottom 设置为 0。
6.2 让定位元素在包含块中居中
方案一 left:0;right:0;top:0;bottom:0;margin:auto;方案二 left: 50%;top: 50%;margin-left: 负的宽度一半;margin-top: 负的高度一半;注意该定位的元素必须设置宽高
