收藏
PHPz批改状态：合格
老师批语：
<style>* {margin: 0;padding: 0;box-sizing: border-box;}.item {width: 800px;min-height: 1800px;border: 1px solid lightslategray;position: relative;margin: 30px;}.item1 {width: 500px;height: 100px;background-color: lightcoral;position: relative;/* 是相对其自身的位置进行偏移，原来的占位空间不变（依旧存在），后面的元素也不能顶上来。经常被用来作为绝对定位元素的容器块 */left: 50px;top: 50px;}.item2 {width: 600px;height: 120px;background-color: lightgreen;position: absolute;/* 位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> */left: 300px;top: 10px;}.item3 {width: 500px;height: 100px;background-color: yellow;position: fixed;/* 不随着页面的滚动而改变位置，始终在固定位置显示 */}.item4 {width: 90%;height: 50px;background-color: blue;position: sticky;/* 首先占用文档流位置显示，当鼠标滑动后正常显示该位置，但当临界屏幕位置后，该元素按照设定的位置固定（不再随着屏幕滚动）*//* 指定 top, right, bottom 或 left 四个其中之一，才可使粘性定位生效 */left: 10px;/* top: 30px; *//* 默认显示在屏幕最顶部，但当页面滚动的时候，该位置一直固定在此，不随着屏幕滚动。 */bottom: 0;/*默认显示在屏幕最底部，但当页面滚动到应该显示该元素的时候，则随着屏幕继续上移，不再继续固定，开始显示别的元素*/}p {margin-top: 250px;}</style><div class="item"><div class="item1">item1</div><div class="item2">item2</div><div class="item3">item3</div><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><div class="item4">item4</div><p>asas000</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p></div><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p><p>asas</p>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
