网站建设策划报告,运城小程序开发公司,浙江杭州下沙做网站,wordpress给代码高亮position 的属性与含义
CSS 中的 position 属性用于控制元素在页面中的定位方式#xff0c;有四个主要的取值#xff0c;每个取值都会影响元素的布局方式#xff0c;它们是#xff1a; static#xff08;默认值#xff09;#xff1a; 这是所有元素的初始定位方式。在静…position 的属性与含义
CSS 中的 position 属性用于控制元素在页面中的定位方式有四个主要的取值每个取值都会影响元素的布局方式它们是 static默认值 这是所有元素的初始定位方式。在静态定位下元素会按照它们在文档流中的顺序依次排列不受 top、right、bottom、left 等属性的影响。静态定位的元素无法通过 z-index 属性来改变其层叠顺序。 relative 相对定位会相对于元素在文档流中的初始位置进行定位。可以使用 top、right、bottom、left 属性来调整元素的位置但元素在文档流中的位置不会改变仍占据原来的空间。 absolute 绝对定位会相对于最近的已定位非static祖先元素进行定位。如果没有已定位的祖先元素那么会相对于文档的初始包含块进行定位。绝对定位会从文档流中脱离不占据文档流空间可以使用 top、right、bottom、left 属性来控制位置而且可以通过 z-index 属性来改变元素的层叠顺序。 fixed 固定定位会相对于视口浏览器窗口进行定位元素会随着页面滚动而保持在固定位置不随滚动而移动。固定定位的元素也不占据文档流空间可以使用 top、right、bottom、left 属性来确定位置同样可以通过 z-index 来控制层叠顺序。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{margin: 0;padding: 0;}.top{position: static;left: 100px;background: red;width: 200px;height: 80px;}.parent{position: relative;top: 50px;left: 50px;width: 200px;height: 200px;background: greenyellow;}.child1{width: 50px;width: 50px;position: absolute;top: 50px;left: 0;background: blanchedalmond;}.child2{width: 300px;height: 20px;position: fixed;top: 0;left: 0;background: blueviolet;}/style
/head
bodydiv classtop我是最上面的节点/divdiv classparentdiv classchild1child1/divdiv classchild2child2/div/div
/body
/htmldisplay、float、position的关系
display、float 和 position 是 CSS 中用于控制元素布局和定位的三个重要属性它们之间有一定的关系和交互但分别用于不同的布局和定位方式。 display 属性 display 属性用于控制元素在文档流中的显示方式。它的常见取值包括 block、inline、inline-block、flex、grid 等。不同的 display 值会影响元素的布局方式。例如block 元素会在页面上占据一整行而 inline 元素会在同一行内排列。display 属性与 float 和 position 属性通常是互斥的即一个元素不会同时使用这三个属性来控制布局。 float 属性 float 属性用于将元素浮动到其容器的左侧或右侧以使其他元素可以环绕它。通常用于创建文本环绕图片等效果。float 属性不会使元素脱离文档流但会影响元素的布局。当使用 float 时其他元素可能需要通过 clear 属性来清除浮动元素的影响以防止出现意外的布局问题。 position 属性 position 属性用于控制元素的定位方式。它的常见取值包括 static、relative、absolute 和 fixed。不同的 position 取值会影响元素的定位方式和是否脱离文档流。position 属性通常与 top、right、bottom 和 left 属性一起使用以精确定位元素。使用 position 属性时元素的定位可以是相对于文档的初始包含块、相对于最近的已定位非 static祖先元素或相对于视口浏览器窗口。
虽然这三个属性在控制元素的布局和定位上有一定的交互但它们各自有不同的应用场景和目的。通常情况下
display 用于控制元素的基本显示方式如块级元素、行内元素等。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.span1, .span2{display: block;width: 100px;height: 50px;background: grey;margin-bottom: 20px;}.content2{margin-top: 50px;}.div1, .div2{display: inline;/* 设置为行内元素 宽高设置无效 */width: 100px;height: 200px;margin-left: 10px;background: gold;}/style
/head
bodydiv!-- 行内元素设置宽高无效 --span styleheight: 80px;width: 100px; background: red行/span/divdivspan classspan1我是行内元素1/spanspan classspan2我是行内元素2/span/divdiv classcontent2div classdiv1我是块级元素1/spandiv classdiv2我是块级元素2/div/div
/body
/htmlfloat 用于创建文本环绕效果或多栏布局。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleimg {float: left; /* 或者 float: right; */margin-right: 10px; /* 为了增加文字和图片之间的间距 */width: 50px;height: 50px;}.content{width: 150px;height: 200px;}/* -------------以下是多栏布局的样式---------------- */.column {width: 100%;}.column-item {width: 30%; /* 每栏的宽度 */float: left;background: greenyellow;margin-right: 2%; /* 为了增加栏目之间的间距 */box-sizing: border-box; /* 防止边框和填充增加宽度 */}/style
/head
body!-- 文字环绕部分 --div classcontentimg src./image.jpg alt图片p这是一段文本会围绕在图片周围。这是一段文本会围绕在图片周围。这是一段文本会围绕在图片周围。/p/div!-- 多栏布局 --div classcolumndiv classcolumn-item栏目 1/divdiv classcolumn-item栏目 2/divdiv classcolumn-item栏目 3/div/div
/body
/htmlposition 用于精确定位元素的位置通常与 top、right、bottom 和 left 一起使用。 这个就不举例子了上面又定位的例子
absolute与fixed
absolute 和 fixed 是 CSS 中用于控制元素定位的两种方式它们有一些共同点和不同点
共同点 都脱离文档流 无论是 absolute 还是 fixed 定位的元素都脱离了文档流不再占据正常的文档流位置因此不会对其他元素的布局产生影响。 可以通过 top、right、bottom 和 left 精确定位 无论是 absolute 还是 fixed 元素都可以使用这四个属性来精确地确定它们在页面中的位置。 可以通过 z-index 控制层叠顺序 使用 z-index 属性你可以控制 absolute 和 fixed 元素的层叠顺序即哪个元素位于其他元素的上方。
不同点 相对于不同的参照物 absoluteabsolute 定位的元素相对于其最近的已定位非 static祖先元素进行定位。如果没有已定位的祖先元素它会相对于文档的初始包含块viewport进行定位。fixedfixed 定位的元素相对于视口浏览器窗口进行定位而不受页面滚动的影响。 在滚动时的行为不同 absolute随着页面滚动absolute 定位的元素会保持相对于其最近的已定位祖先元素不变的位置。fixedfixed 定位的元素会保持固定在视口的位置不会随页面滚动而移动。 是否影响其他元素 absoluteabsolute 定位的元素脱离文档流但在脱离文档流之前会占据原来的文档流位置可能会影响其他元素的布局。fixedfixed 定位的元素脱离文档流并且不占据文档流位置不会影响其他元素的布局。
sticky 定位
sticky 定位是一种相对于元素自身在正常文档流中的位置和祖先元素的滚动容器滚动的一种定位方式。它在某些情况下表现为普通的文档流定位static 或 relative但当元素的位置在视口中发生变化时它会变为固定定位fixed。
要理解 sticky 定位可以将其看作是 relative 和 fixed 定位的混合。它适用于创建元素在页面滚动时粘性sticky地保持在某个位置的效果通常用于创建固定的导航栏或侧边栏。
关键特点和使用方法 相对于滚动容器定位 sticky 元素会相对于其最近的具有滚动条的祖先元素进行定位。如果没有这样的祖先元素则相对于视口进行定位。 初始位置 元素的初始位置由其在文档流中的位置决定就像 relative 定位一样。在初始位置时元素不会脱离文档流。 滚动触发 当页面滚动到达特定位置通常是元素初始位置之上或之下的某个点时元素会变为固定定位就像 fixed 定位一样保持在特定位置直到滚动容器滚动超过元素的范围。 滚动范围 sticky 元素在滚动容器内保持固定定位直到滚动到达滚动容器的底部或顶部或者直到它的容器边界取决于滚动的方向。 使用 top、right、bottom、left 控制位置 可以使用这些属性来精确定位 sticky 元素在切换到固定定位时的位置。
示例用法
.sticky-element {position: -webkit-sticky; /* 兼容性写法 */position: sticky;top: 20px; /* 滚动触发后的垂直位置 */
}div classscroll-container!-- 具有 sticky 定位的元素 --div classsticky-element这是一个 sticky 元素。/div!-- 页面内容 --
/div在示例中.sticky-element 是一个具有 sticky 定位的元素当页面滚动到一定位置时它会保持在距离顶部 20 像素的位置直到滚动容器.scroll-container的底部。
