贵阳做网站的大公司,西安模板网站建站,耒阳在那做网站,专业的平面设计网站有哪些position有以下属性值#xff1a;
属性值概述absolute生成绝对定位的元素#xff0c;相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。relative生成相对定位的元素#xff0c;相对于其原来的位置进行定位。元素的位置通过…position有以下属性值
属性值概述absolute生成绝对定位的元素相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。relative生成相对定位的元素相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定。fixed生成绝对定位的元素指定元素相对于屏幕视⼝viewport的位置来指定元素位置。元素的位置在屏幕滚动时不会改变⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。static默认值没有定位元素出现在正常的文档流中会忽略 top, bottom, left, right 或者 z-index 声明块级元素从上往下纵向排布⾏级元素从左向右排列。inherit规定从父元素继承position属性的值
前面三者的定位方式如下
relative 元素的定位永远是相对于元素自身位置的和其他元素没关系也不会影响其他元素。 fixed 元素的定位是相对于 window 或者 iframe边界的和其他元素没有关系。但是它具有破坏性会导致其他元素位置的变化。 absolute 元素的定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left浏览器会根据什么去确定它的纵向和横向的偏移量呢答案是浏览器会递归查找该元素的所有父元素如果找到一个设置了position:relative/absolute/fixed的元素就以该元素为基准定位如果没找到就以浏览器边界定位。如下两个图所示 补充1absolute与fixed共同点与不同点
共同点
改变行内元素的呈现方式将display置为inline-block 使元素脱离普通文档流不再占据文档物理空间覆盖非定位文档元素
不同点
abuselute与fixed的根元素不同abuselute的根元素可以设置fixed根元素是浏览器。在有滚动条的页面中absolute会跟着父元素进行移动fixed固定在页面的具体位置。
补充2对 sticky 定位的理解
sticky 英文字面意思是粘贴所以可以把它称之为粘性定位。语法position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时它的表现就像 position:fixed;它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一换言之指定 top, right, bottom 或 left 四个阈值其中之一才可使粘性定位生效。否则其行为与相对定位相同。
