css 元素位置互换_CSS元素的位置

css 元素位置互换

Positioning of elements is extremely important. Consider the Periodic table of elements in Chemistry(ugh!) All the elements are placed in a proper sequence that makes it easier for us to find those elements, grouped together by their properties and atomic numbers.

元素的位置非常重要。 考虑一下化学中元素周期表(ugh！)。所有元素都以适当的顺序放置，这使我们更容易找到按其性质和原子序数分组的元素。

Well, enough of chemistry now. The point of discussing the periodic table is that positioning matters. How you position the elements of your webpage are extremely important from the point of view of usability i.e., how comfortable a user feels using your website.

好吧，现在化学足够了。 讨论元素周期表的重点是位置很重要。 从可用性的角度，即用户使用您的网站的舒适度的角度来看，如何布置网页元素非常重要。

CSS can help you a lot when it comes to positioning stuff on your website. The position property is used to specify the positioning for an element. There are four types of position values:

CSS可以帮助您在网站上定位内容。 position属性用于指定元素的位置。 位置值有四种类型：

• static

  static

• relative

  relative

• absolute

  absolute

• fixed

  fixed

Once the position proerty is set, then the element can be positioned on the webpage using the top, bottom, left and right properties but they do not work unless the position value is set. Also, these values will behave differently for each of the position value mentioned above.

设置position属性后，即可使用top，bottom，left和right属性将元素定位在网页上，但是除非设置了position值，否则它们将不起作用。 同样，这些值对于上述每个position值的行为也会有所不同。

静态位置 (Static position)

The default for any page element is static. Static means that the element would fit on the page as it normally would. Explicitly specifying static is pretty rare, and can be used to get rid of any inherited position value.

任何页面元素的默认值为static 。 静态意味着该元素将像往常一样适合页面。 显式指定static的情况很少见，可用于摆脱任何继承的位置值。

Static positioned elements are not affected by the top, bottom, left and right properties.

静态定位的元素不受top ， bottom ， left和right属性的影响。

div{ 
    position: static;
    border: 15px solid #6699CC;
}

Live Example →

现场示例→

相对位置 (Relative position)

This position means relative to itself. Setting an element's position to relative but not specifying any other attributes like top, bottom, left or right will have no particular effect on the element's position. But specifying, say a bottom attribute as, bottom: 20px; would move the element Upwards by 20px as compared to its NORMAL position.

这个位置意味着相对于自身。 将元素的位置设置为相对，但不指定其他任何属性(例如top ， bottom ， left或right)将不会对元素的位置产生特殊影响。 但是指定一个bottom属性为bottom: 20px; 将通过向上移动元素20px相比，其正常位置。

Setting the position to relative makes the element appear on top of any other static element in its area. Other content will not be adjusted to fit into any gap left by the element.

将位置设置为relative会使该元素显示在其区域中任何其他静态元素的顶部。 其他内容将不进行调整以适合元素留下的任何间隙。

div{ 
    position: relative; 
    border: 4px solid #6699CC; 
}

Live Example →

现场示例→

绝对位置 (Absolute position)

This value allows you to place an element exactly where you want it to be placed. Positioning attributes top, bottom, left and right are used to determine the exact location. These elements are placed relative to the last parent element. If there is no parent element, these elements are set to be relative to the page itself, i.e. it moves along with the page while scrolling.

此值使您可以将元素精确地放置在想要放置的位置。 定位属性top ， bottom ， left和right用于确定确切位置。 这些元素相对于最后一个父元素放置。 如果没有父元素，则将这些元素设置为相对于页面本身，即滚动时它与页面一起移动。

div{ 
    position: absolute;
    border: 15px solid #6699CC;
}

Live Example →

现场示例→

固定位置 (Fixed position)

This type of positioning is rare but certainly has its uses. A fixed position element is positioned relative to the viewport or the browser window itself and not relative to the parent element or its sibling elements. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

这种定位很少见，但肯定有其用途。 固定位置元素是相对于视口或浏览器窗口本身而不是相对于父元素或其同级元素放置的 。 滚动窗口时，视口不会改变，因此固定位置的元素将保持在滚动页面时的位置。

This effect is actually pretty cool, but it needs to be well tested. 这种效果实际上很酷，但是需要进行良好的测试。

div{ 
    position: fixed;
    border: 15px solid #6699CC;
}

Live Example →

现场示例→

You see a fixed orange element on the left side of the browser screen with a Facebook Like button, it is made by using the position:fixed property.

您会在浏览器屏幕的左侧看到一个固定的橙色元素，带有一个Facebook Like按钮，该元素是使用position:fixed属性制成的。

Hello! I am fixed here.

你好！ 我固定在这里。

重叠元素 (Overlapping Elements)

When we play around with positioning so much, there will be situations when elements will overlap with each other. So, in situations of overlap, which element will appear on the top of the other?

当我们进行大量定位时，有时会出现元素相互重叠的情况。 因此，在重叠的情况下，哪个元素会出现在另一个元素的顶部？

The z-index defines the stack order of an element. An element with a greater z-index will always be on top of elements with a lower z-index. An element can have a positive or a negative z-index value.

z-index定义元素的堆叠顺序。 z-index较大的元素将始终位于z-index较低的元素之上。 元素可以具有正或负的z-index值。

h1{ 
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Live Example →

现场示例→

Note: If two positioned elements overlap without a 注意：如果两个定位的元素重叠而未指定z-index specified, the element positioned last in the HTML code will be shown on top.z-index ，则HTML代码中位于最后的元素将显示在顶部。

翻译自: https://www.studytonight.com/cascading-style-sheet/positioning-of-elements

css 元素位置互换