css样式位置_CSS位置样式的神秘配对简介

css样式位置

by Anabella Spinelli

通过安娜贝拉·斯皮内利(Anabella Spinelli)

CSS位置样式的神秘配对简介 (An introduction to the mysterious pairings of CSS position flavors)

Ever since I started learning about web development I found CSS positioning to be a mixture of mysterious co-dependant properties whose interactions and influences I never quite understood. Like most newbies, I just juggled around with position, display, float, clear, and all of their possible combinations of values until it looked like what I wanted.

自从我开始学习Web开发以来，我发现CSS定位是神秘的，相互依存的属性的混合体，其相互作用和影响我从未完全了解。 像大多数新手一样，我只是随意处理position ， display ， float ， clear和它们所有可能的值组合，直到看起来像我想要的那样。

That’s how CSS works, right?

CSS就是这样工作的，对不对？

Now, after some years of focusing on API testing, I wanted to revisit that old vanilla CSS and try to really understand those basic layout properties, while I try to figure out what the cool kids are doing these days and jump back on the dev train.

现在，在专注于API测试多年之后，我想重新探究旧的原始CSS并尝试真正理解那些基本的布局属性，同时我试图弄清楚这些天好孩子在做什么，然后跳回开发火车上。

This is my first stop: position.

这是我的第一站：位置。

了解属性 (Getting to know the properties)

The position property can be a mysterious thing to run into when you’re starting to learn about CSS. It’s like being given a set of unknown spices that look similar, but have very different flavours and the combinations between them don't always work like expected.

当您开始学习CSS时， position属性可能是一个神秘的事物。 这就像给了一组未知的香料，看起来很相似，但是却有非常不同的风味，它们之间的组合并不总是能像预期的那样起作用。

This is an attempt to describe the best and most common pairings between them so that you can easily apply them in your first web cooking steps. Just like we learn in the kitchen — parsley goes well with garlic, but not that much with cinnamon.

这是为了描述它们之间最好和最常见的配对 ，以便您可以在第一个网络烹饪步骤中轻松应用它们。 就像我们在厨房里学习一样—欧芹和大蒜搭配得很好，但与肉桂搭配就不那么多了。

First of all, let’s define what each of the position variants tastes like:

首先，让我们定义每个位置变体的味道：

• static: this is what every HTML element has by default. It means the element will be positioned according to the normal document flow. It’s basically the salt of them all.

  static ：这是每个HTML元素默认具有的内容。 这意味着该元素将根据常规文档流进行定位。 基本上是所有人的盐 。

• relative: elements with relative position can be placed relatively to the space they would occupy in the normal document flow. They’re still part of the document flow, but support top, right, bottom and left properties. Whatever values you assign to those properties will be calculated using it’s natural position and boundaries as reference. Like adding some pepper, it doesn’t do much harm.

  relative ：具有相对位置的元素可以相对于它们在正常文档流中将占据的空间进行放置。 它们仍然是文档流的一部分，但支持top, right, bottom and left属性。 分配给这些属性的任何值都将使用其自然位置和边界作为参考来计算。 像加一些胡椒粉一样，它并没有多大危害。

• absolute: this one’s tricky — it’s sort of like cumin, it can be a very good addition, but you have to use it carefully. Absolute elements are removed from the normal document flow. This means they don’t affect and aren’t affected by other elements in the page. However, they will be placed relatively (yes, I know, bear with me) to their nearest positioned ancestor. This means whichever parent element that has its position explicitly set. It can be fine tuned using top, right, bottom and left. So it’s similar to relative positioning, but, since it’s no longer part of the document flow, it uses a parent as the reference.

  absolute ：这很棘手-有点像孜然，可能是非常好的添加，但是您必须谨慎使用。 绝对元素将从常规文档流中删除 。 这意味着它们不会影响页面，也不会受到页面中其他元素的影响。 但是，它们将被放置在相对最接近其祖先的positioned (是的，我知道，要忍受)。 这意味着显式设置其位置的任何父元素。 可以使用top, right, bottom and left进行微调。 因此，它类似于相对定位，但是由于它不再是文档流的一部分，因此它使用父级作为参考。

• fixed: ah, this one’s easy. Fixed elements are not part of the document flow and their position is based on the whole window, sometimes referred to as viewport. Also, they’re not affected by scrolling.

  fixed ：啊，这很简单。 固定元素不是文档流的一部分，它们的位置基于整个窗口，有时也称为viewport 。 此外，它们不受滚动影响。

那么，我们如何混合它们呢？ (So, how can we mix them?)

Use position: relative; whenever you want to offset an element a little bit from where it would normally be, but you don't want everything else to move with it. Remember that all other elements will behave as if it hasn’t moved.

使用position: relative ; position: relative ; 每当您想将元素从通常位置偏移一点，但又不希望其他所有元素一起移动时。 请记住，所有其他元素的行为就像未移动一样。

Use position: absolute; when you care about where the element is in relation to its parent or wrapper with a position, in this example, relative. Note for this that the position property does not cascade, so this will use the nearest parent with an explicit relative declaration. If you want to force cascading of this property, you can declare it as position: inherit;.

使用position: absolute ; 当您关心元素相对于其父元素或包装器的位置(在本例中为relative )在何处时。 请注意， position属性不会级联，因此它将使用具有显式相对值的最近的父级 宣言。 如果要强制层叠此属性，可以将其声明为position: inherit; position: inherit; 。

Keep in mind that this element’s position is defined by the size and shape of its relative parents, so if you change that, this element might be affected too.

请记住，此元素的位置由其相对父元素的大小和形状定义，因此，如果更改此元素，则该元素也可能会受到影响。

Finally,position: fixed; is a funny thing to play around with. Normal usages include sticky navbars, footers, or side menus. Remember it’s out of the normal document flow, so this means:

最后， position: fixed; 是一件有趣的事情。 正常用法包括粘性导航栏，页脚或侧面菜单。 请记住，这超出了正常的文档流程，因此这意味着：

• you can place it wherever you want and nothing else will break
  您可以将其放置在任意位置，其他都不会损坏
• it also means that it won’t do anything else you don’t explicitly tell it to do, so you need to set its 2 coordinates for it to show up at all.
  这也意味着它不会做任何您没有明确要求做的事情，因此您需要设置它的2个坐标才能完全显示出来。

• these 2 coordinates (namely, top or bottom, plus left or right) will be measured from the edge of the window.

  这两个坐标(即top或bottom ，以及left或right )将从窗口的边缘开始测量。

There is another option I didn’t cover: position: sticky. This makes elements behave and scroll normally but then stick to a certain position while the rest of the content keeps on scrolling. I decided to leave it out, because it’s still experimental and exceeds the understand the basics scope of this article. But, if you’re curious, here’s a link showing what it’s all about.

我没有介绍另一个选项： position: sticky 。 这使元素能够正常运行并滚动，但是随后将其固定在某个位置，而其余内容将继续滚动。 我决定将其省略，因为它仍处于实验阶段，超出了本文的基本知识范围。 但是，如果您好奇的话，下面的链接将显示所有内容。

I hope you enjoyed the read and learned something along the way. If you have any comments or feedback, I’d love to read them .

希望您喜欢阅读和学习的过程。 如果您有任何意见或反馈，欢迎阅读。

翻译自: https://www.freecodecamp.org/news/an-intro-to-the-mysterious-pairings-of-css-position-flavors-92b3625176ea/

css样式位置