郑州做网站推广地,网站开发的外文翻译,织梦网站模板怎么用,十大免费看盘软件sticky属性设置
/* 设置粘性布局 */
position: sticky;
/* 拖动滚动条#xff0c;当前元素超出文档0的位置时#xff0c;触发定位效果#xff08;同级元素位置不会受影响#xff09; */
top: 0;页面初始效果
设置前#xff08;滚动页面时#xff0c;标签栏随页面滚动
/* 拖动滚动条当前元素超出文档0的位置时触发定位效果同级元素位置不会受影响 */
top: 0;页面初始效果
设置前滚动页面时标签栏随页面滚动 设置后标签栏达到指定位置时固定于该位置
源码
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentinitial-scale1.0, user-scalableno /style typetext/css*{margin: 0;}p{background: #e6f3ff;width: 100%;height: 200px;font-size: 30px;border: 4px solid #ddf;box-sizing: border-box;}ul{display: flex;background: #adddeb;border: 4px solid #ff4040;padding: 10px;text-align: center;/* 设置粘性布局 */position: sticky;/* 处于指定位置0时触发固定效果 */top: 0;}li{list-style: none;flex: 1;}/style
/head
bodyp头部内容/pulli标签1/lili标签2/lili标签3/li/ulp内容区1/pp内容区2/pp内容区3/pp内容区4/p
/body
script typetext/javascript/script
/html
