建设工程鲁班奖公示网站,网络营销策划的基本原则,品牌网站建设专家,简述制作网站的流程“视口”就是浏览器窗口中实际显示文档内容的区域#xff0c;不包含浏览器的“外框”#xff0c;如菜单、工具条和标签。文档则是指整个网页。
1 css 的position static 正常定位#xff0c;是元素position属性的默认值#xff0c;元素遵循常规流。 relative 相对定位不包含浏览器的“外框”如菜单、工具条和标签。文档则是指整个网页。
1 css 的position static 正常定位是元素position属性的默认值元素遵循常规流。 relative 相对定位会相对于自身在常规流中的位置进行定位。其在常规流中的位置会被保留。 absolute 绝对定位会脱离文档流相对于离自身最近的祖先position为relative进行偏移定位。 fixed 固定定位会脱离文档流相对窗口进行偏移定位。 sticky 粘性定位类似static和fixed的结合。
表 css position属性的5个值
1.1 relative 相对定位
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classcontainerdiv classcon1div classblock/divdiv classblockposition:static/divdiv classblock/div/divdiv classisolate/divdiv classcon2div classblock block1/divdiv classblock block2position:relative/divdiv classblock/div/div
/div
/body
/htmlstyle langless.block {width: 150px;height: 100px;background-color: #f3bbbb;border: solid 1px blue;text-align: center;line-height: 100px;color: red;}.container {display: flex;.isolate{width: 30px;}.con2 {.block1 {z-index: 99;}.block2 {z-index: 1;background-color: blue;position: relative;top: -100px;}}}
/style 图 positionrelative 示意图
注意当position为static(常规)时z-index及left(等位置元素)均为无效。
1.2 absolute 绝对定位
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classcontainerdiv classcon1div classblock/divdiv classblockposition:static/divdiv classblock/div/divdiv classisolate/divdiv classcon2div classblock block1/divdiv classblock block2divposition:absolute (parent is body)/div/divdiv classblock/div/divdiv classisolate/divdiv classcon2div classblock block1/divdiv classparentdiv classblock block2position:absolute (parent is div)/div/divdiv classblock/div/div
/div
/body
/htmlstyle langless.block {width: 150px;height: 100px;background-color: #f3bbbb;border: solid 1px blue;text-align: center;line-height: 100px;color: red;}.container {display: flex;.isolate{width: 30px;}.con2 {.block1 {z-index: 99;}.block2 {line-height: 50px;z-index: 1;background-color: blue;position: absolute;top: 50px;}.parent {position: relative;}}}
/style 图 positionabsolute 示意图
注意: absolute 是相对于positionrelative的最近父元素定位当没有找到相关父元素时会相对于body标签定位。
1.3 fixed 固定定位
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classblockdiv classcon/div
/div
/body
/htmlstyle
.block {width: 10000px;height: 600px;background: #f3c4c4;
}
.con {width: 100px;height: 100px;position: fixed;background: blue;left: 100px;top: 100px;
}
/style 图 positionfixed示意图
注意fixed 是相对于窗口会脱离文档流。
1.4 sticky 粘性定位
当positionsticky时如果top、right、bottom、left四个属性都不设置具体值sticky不会生效其表现效果与static一致。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div classbig-containerdiv classcontainer container1div classcon con1/divdiv classsep/divdiv classcon con2/divdiv classsep/divdiv classcon con3/div/divdiv classcontainer container2div classcon con1/divdiv classsep/divdiv classcon con2/divdiv classsep/divdiv classcon con3/div/div
/div
/body
/htmlstyle.big-container {display: flex;.container {width: 100px;height: 250px;margin-left: 30px;border: solid 1px #8a8a8a;overflow: auto;.sep {width: 100px;height: 30px;background: grey;}.container2 {.con2 {top: 30px;position: sticky;}}.con {width: 100px;height: 100px;background: #f3bbbb;}.con2 {background: green;}}}
/style图 positionsticky 示意图
当top、right、bottom、left四个属性中至少设置一个具体值时元素具备两种状态静态定位状态及固定定位fixed状态。例如当top30px时元素离窗口距离大等于30px时元素为静态定位状态否则为固定定位状态。 图 positionsticky 元素处理固定状态示意图
注意当元素处于固定状态时其在文档流中的位置会被保留。
2 滚动
1Window对象的scrollTo方法接收一个点的x和y坐标这个方法会滚动窗口从而让这个点位于视口点左上角。如果这个点太接近文档顶部或右边浏览器会尽可能让视口左上角接近这个点但不可能真的移动到该点。
2Window对象的scrollBy方法参数数个相对值会加在当前滚动位置之上。
scrollBy(0,50); // 向下滚动50像素。
3HTML元素上的scrollIntoView方法保证调用它的那个元素在视口中可见。默认情况下滚动后的结果会尽量让元素的上边对齐或接近视口上沿。如果给这个方法传人唯一参数false则滚动结果会尽量让元素的底边对齐视口下沿。
2.1 平衡滚动
如果想让上述滚动方法平滑移动则需传人一个对象而不是两个数值。这个对象的behavior属性有两个属性值auto(instant)默认值立即滚动到指定位置smooth滚动时平滑过渡。 图 平滑滚动示意图
