2020-10-07

    科技2024-10-13  28

    前端学习day4-定位相关

    定位(position): static 默认值,没有开启定位 relative 开机元素相对定位 absolute 开启元素绝对定位 fixed 开启元素固定定位 sticky 开启元素粘滞定位


    相对定位(relative) 特点: 1.元素开启相对定位后,不设置偏移量(offset)就不会发生变化 偏移量:top, bottom, left, right 例:top: 30px; 2.相对定位是参照于元素在文档流中的位置进行定位 3.相对定位会提高元素的层级 4.相对定位不会使元素脱离文档流 5.相对定位不会改变元素的性质,块还是块,行内还是行内


    绝对定位(absolute) 特点: 1.元素开启绝对定位后,不设置偏移量(offset)元素就不会发生变化 2.元素开启绝对定位后,元素会从文档流中脱离 3.绝对定位会改变元素的性质,行内变成块,块的宽度被内容撑开 4.绝对定位会提高元素的层级 5.绝对元素是相对于其包含块进行定位的 包含块(containing block) I.正常情况下,包含块就是离当前元素最近的祖先元素 II.绝对定位的包含块就是离它最近的开启了定位的祖先元素。如果所有祖先元素都没有开启定位,则根元素就是他的包含块


    固定定位(fixed) 特点:永远参照浏览器视口定位,不会随页面上下滑动而滑动


    粘滞定位(sticky) 特点: 元素可以在到达某个位置的时候将其固定 top: 0px;将元素设置为到达顶部的时候固定


    元素层级 1.对于开启定位的元素,可以通过z-index属性来指定元素的层级,z-index需要一个整数作为参数,值越大层级越大 2.如果元素层级一样,则显示靠下的元素 3.祖先元素层级再高也不会盖住后代元素

    Processed: 0.012, SQL: 8