• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

CSS position属性示例说明

CSS/HTML rin, seun 4个月前 (06-20) 50次浏览 0个评论

在真正精通CSS之前,您需要了解基础知识。您必须了解CSS属性及其值。

在本文中,我们将重点介绍CSS position属性。我们将学习CSS position属性的各种值以及它们如何工作。我们开工吧!

什么是CSS position属性?

CSS position属性定义元素在文档中的位置。此属性与left,right,top,bottom和z-index属性一起使用,以确定元素在页面上的最终位置。

position属性可以采用五个值。他们是:

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

让我们讨论其中的每一个。

静态的-static

这是元素的默认值。根据文档的正常流程放置元素。left,right,top,bottom和z-index属性不会影响带有的元素position: static

让我们用一个例子来说明position: static对元素的位置没有影响。我们在父容器中放置了三个div。在整篇文章中,我们将使用此示例。

<html>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

让我们将position: staticclass main-element和left,top值添加到div中。我们还向其他div添加了一些样式,以将它们与焦点所在的元素区分开。

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

这就是结果。

您是否注意到它没有变化?这证实了left和bottom属性不会影响带有的元素的事实position: static

让我们移至下一个值。

相对的-relative

带的元素position: relative保留在文档的正常流程中。但是,与静态元素不同,left,right,top,bottom和z-index属性会影响元素的位置。基于左,右,上和下属性的值的偏移量将应用于元素相对于其自身的位置。

让我们在示例中替换position: staticposition: relative

.main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

请注意,left和bottom属性现在会影响元素的位置。另请注意,该元素保留在文档的正常流程中,并且相对于其自身应用了偏移量。在继续其他值时,请注意这一点。

绝对-absolute

的元素position: absolute相对于其父元素放置。在这种情况下,该元素将从常规文档流中删除。其他元素的行为就像该元素不在文档中一样。在页面布局中没有为元素创建空间。left,top,bottom和right的值确定元素的最终位置。

要注意的一件事是相对于元素position: absolute的位置相对于其最接近的祖先。这意味着父元素必须具有以外的位置值position: static

如果未定位最近的父元素,则相对于下一个定位的父元素定位它。如果没有定位的祖先元素,则它相对于该<html>元素定位。

让我们回到我们的例子。在这种情况下,我们将主要元素的位置更改为position: absolute。我们还将为其父元素提供一个相对位置,以使它不会相对于该<html>元素定位。

.main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
	background: #f2f2f2;
	padding: 10px;
    border: 1px solid #81adc8;
} 

这是结果。

请注意,文档中没有为该元素创建任何空间。现在,该元素相对于父元素定位。在继续下一个值时,请注意这一点。

固定-fixed

固定位置元素类似于绝对定位元素。它们也会从文档的正常流程中删除。但是与绝对定位的元素不同,它们始终相对于<html>元素定位。

要注意的一件事是固定元素不受滚动影响。它们始终保持在屏幕上的相同位置。

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

html {
    height: 800px;
}

在这种情况下,元素相对于<html>元素定位。尝试滚动查看该元素是否已固定在屏幕上。

让我们移至最终值。

黏-sticky

position: sticky是的混合position: relativeposition: fixed。直到某个滚动点为止,它都像一个相对定位的元素,然后就像一个固定元素。如果您不了解这意味着什么,请不要担心,该示例将帮助您更好地理解它。

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}

 

在结果选项卡上滚动以查看结果。您会看到它充当相对元素,直到到达屏幕上的某个点,top: 10px然后就像固定元素一样到达那里。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址