position的定位方式

文档流:


一个元素内部子元素如果采用流失布局, 元素的内部形成一个文档流, 每一个子元素在 文档流都有自己的位置

position :

通过该方式设置定位方式

static:

静态定位方式 每个标签默认的定位方式 整个网页采用流式布局 不能使用left top bottom right 设置位置

relative:

相对定位 不会脱离文档流 相对定位与自己原来的位置进行偏移,一般位置上微小 的变化的时候 采用相对定位 使用left top bottom right 设置位置

absolute:

绝对定位 离它最近的定位方式为非static的定位元素为参照 以父元素为参照的时候 要把父元素的定位方式设置成相对定位(position:relative) 如果只加 position:absolute 该元素还在原来的位置,实际开发的时候并不会出现这种情况 position:absolute left top 设定位置 绝对定位之后 元素脱离文档流 脱离原来的位置 并且不会撑开父元素,所以对父元素 在设置定位的时候 设置成相对定位,块元素的宽度不再是父元素的宽度 必须手动设置宽度

fixed:

固定位置 使元素脱离文档流 元素不会随着网页的滚动而滚动 导航固定位置

sticky:

粘性定位
posted @ 2019-09-18 21:44  眉遮白霜亦如雪  阅读(221)  评论(0编辑  收藏  举报