css左右布局代码_如何使用CSS位置来布局网站（带有示例代码）

css左右布局代码

Using CSS position to layout elements on your website can be hard to figure out. What’s the difference between absolute, relative, fixed, and sticky? It can get confusing pretty quickly.

使用CSS位置来布局网站上的元素可能很困难。 绝对，相对，固定和粘滞有什么区别？ 很快就会引起混乱。

To help, this tutorial will guide you through all the CSS position properties. And you’ll be able to get your website layouts pixel perfect!

为了帮助您，本教程将指导您完成所有CSS位置属性。 而且您将能够使您的网站布局像素完美！

CSS位置有什么作用？ (What does CSS position do?)

Using CSS, you can layout all your elements on your webpage visually. For example, you can position an element at the very top of your page, or 50px below the element before it.

使用CSS，您可以直观地在网页上布局所有元素。 例如，您可以将元素放置在页面的顶部，或者位于元素之前50px。

To control just how an element will appear in the layout, you need to use the CSS position property. In addition, you can utilize some other position-related properties: top, right, bottom, left, and z-index. (We’ll get more into those later on.)

要控制元素在布局中的显示方式，您需要使用CSS position属性。 另外，您可以利用其他一些与位置相关的属性： top ， right ， bottom ， left和z-index 。 (我们稍后会介绍更多内容。)

The position property can take five different values: static, relative, absolute, fixed, and sticky.

position属性可以采用五个不同的值： static ， relative ， absolute ， fixed和sticky 。

It sounds like a lot, but don’t worry!

听起来很多，但是请放心！

Here’s how each value for CSS position works:

这是CSS position每个值的工作方式：

1.静态的 (1. Static)

Position: static is the default value that an element will have. This means if you don’t declare position for an element in CSS, it will automatically be set to static.

Position: static是元素将具有的默认值。 这意味着，如果不在CSS中声明元素的position ，它将自动设置为static 。

It’s important to note that having a static position is the same as not setting the position property at all. (This will come into play a bit later on with absolute positioning.)

重要的是要注意，拥有静态位置与根本不设置position属性相同。 (这将在稍后以绝对定位发挥作用。)

Elements that are statically positioned will appear on the page in what we call the normal flow. For example, if you have multiple <div> elements one after the other, they will appear on the page directly below one another.

静态定位的元素将显示在页面上，这就是我们所谓的常规流程。 例如，如果您有多个<d iv>元素一个接一个，则它们将直接出现在页面上。

Here’s a quick demo to illustrate static position. We are using the following HTML markup:

这是演示静态位置的快速演示。 我们正在使用以下HTML标记：

<div class="parent purple"></div>

<div class="another green"></div>

And here’s the CSS we’re using:

这是我们正在使用CSS：

.first { 
   // No position set, so it's static 
} 
.another { 
   // No position set, so it's static 
   top: 50px; 
}

The second element has a top property set to 50px. You would think that this would move it down 50px, right?

第二个元素的top属性设置为50px 。 您会认为这会将其下移50像素，对吧？

However, here is how it will look on a webpage:

但是，这是网页上的外观：

Since both elements have a static position, none of the layout CSS properties will do anything. This makes that top property have no effect on how the second element is displayed.

由于这两个元素都具有静态位置，所以布局CSS属性都不会做任何事情。 这使得top属性对第二个元素的显示方式没有影响。

So that second element ends up being directly below the first element, with no space between.

这样第二个元素最终就在第一个元素的正下方，并且之间没有空格。

How can we fix this? Let’s move on to the next position:

我们该如何解决？ 让我们继续下一个位置：

2.相对 (2. Relative)

Position: relative is similar to static in that relatively positioned elements will follow the normal flow of the webpage. But the main difference is that using relative will now unlock the other CSS layout properties.

Position: relative与static相似，因为相对定位的元素将遵循网页的正常流程。 但是主要的区别在于，现在使用relative可以解锁其他CSS布局属性。

Think about it this way: you are setting the element to be positioned relative to other elements on the page.

这样考虑：将元素设置为相对于页面上的其他元素定位。

Let’s see what this looks like, and adjust our CSS like this:

让我们看看它是什么样子，并像这样调整我们CSS：

.first { 
   position: static; 
} 
.another { 
   position: relative; 
   top: 50px; 
}

All the CSS is exactly the same, except that we changed the second element to use position: relative. Doing this makes that top: 50px work!

所有CSS都完全相同，除了我们将第二个元素更改为使用position: relative 。 这样做可以使top: 50px起作用！

You can see that the second element is now 50px below the first one, adding that space between them.

您可以看到第二个元素现在比第一个元素低50px，并在它们之间添加了空格。

相对定位的父元素和子元素 (Relatively positioned parent and child elements)

Let’s try another example, using a parent element with a child element nested inside it. Both have position: relative set.

让我们尝试另一个示例，使用一个父元素和一个嵌套在其中的子元素。 两者都有position: relative 。

Here’s the HTML for that:

这是用于此HTML：

<div class="parent purple"> 
   <div class="child magenta"></div> 
</div>

And our CSS styles:

还有我们CSS样式：

.parent { 
   position: relative; 
} 
.child { 
   position: relative; 
   top: 0px; 
   left: 0px; 
}

And here’s what that code will look like in real life:

这是该代码在现实生活中的样子：

You can see that the pink child element is nicely nested inside the purple parent element. The child is also positioned as close to the top and left inside the parent as is possible. (It will go as far up as the parent text)

您会看到粉红色的子元素很好地嵌套在紫色的父元素内。 子项的位置也应尽可能靠近父项，并留在父项内部。 (它将延伸至父文本)

Position relative is relatively straight-forward, right? Well, hold on to your hats, because things are about to get crazy with position absolute.

位置相对来说比较简单，对吧？ 好吧，请戴上帽子，因为position absolute事情变得疯狂。

3.绝对的 (3. Absolute)

Position: absolute will cause an element to be taken out of that normal flow of the webpage.

Position: absolute会导致元素从网页的正常流程中删除。

Wait, what does that mean?

等等，这是什么意思？

So before, using static or relative positioning, elements would be nicely displayed one below the other, depending on their order in the HTML markup. But with absolute positioning, the element is completely taken out of that entire flow.

因此，在使用静态或相对定位之前，根据HTML标记中的顺序，元素可以很好地显示在另一个元素的下方。 但是通过绝对定位，该元素将完全从整个流程中删除。

To help explain, let’s do a comparison to illustrate the difference between relative and absolute positioning.

为了帮助说明，我们进行比较以说明相对定位和绝对定位之间的差异。

In the previous example, we had a parent element with a child element, both positioned relatively. And the child was nested inside the parent element.

在前面的示例中，我们有一个父元素和一个子元素，两者都相对放置。 并且孩子被嵌套在父元素内。

Let’s change that child to be positioned absolutely in the parent!

让我们改变那个孩子绝对位于父母的位置！

Our CSS will now look like this:

现在，我们CSS将如下所示：

.parent { 
   position: relative; 
} 
.child { 
   position: absolute; 
   top: 0px; 
   left: 0px;
}

The pink child element now looks very different from our last example.

现在，粉红色的子元素看起来与我们上一个示例大不相同。

While it is still within the confines of the parent element, it is positioned at the very top and very left of the parent. It’s even covering up the parent text content!

虽然它仍在父元素的范围内，但它位于父元素的最顶部和最左侧。 它甚至掩盖了父文本内容！

This is due to the top: 0px and left: 0px styles of the child, combined with the child being absolutely positioned. In the normal flow of things, elements wouldn’t be on top of (and covering up) other elements.

这是由于子项的top: 0px和left: 0px样式，以及子项的绝对位置。 在正常情况下，元素不会位于其他元素之上(并掩盖)。

But since the child is absolute, it’s essentially on a different layer than the normal elements. So it can be positioned on top of what else is on the webpage.

但是由于子元素是绝对的，因此它实际上与普通元素在不同的层上。 因此，它可以位于网页上其他内容的顶部。

But it will stay within the boundaries of the parent element– as long as the parent has its position set. Which leads us to our next point.

但是它将保留在父元素的边界之内-只要设置了父元素的位置即可。 这就引出了我们的下一个观点。

There is one other tricky aspect to child elements with absolute positioning…

绝对定位的子元素还有另外一个棘手的方面……

绝对定位的元素需要相对于定位的祖先定位自身。 (An absolutely positioned element needs to position itself in relation to a positioned ancestor.)

When you take an element out of the normal flow by using position: absolute, it will look for an ancestor element that has its own position set. This is so the child knows what element it should position itself in relation to.

当您通过使用position: absolute从正常流程中移除一个元素时，它将寻找具有自己位置的祖先元素。 这样，孩子就知道应该相对于自己定位什么元素。

So what happens if a child element is absolutely positioned, but the parent element doesn’t have a position set?

那么，如果子元素被绝对定位但父元素没有位置设置，会发生什么呢？

Here’s our CSS for this illustration:

这是此插图CSS：

.parent { 
   // No position set, so it's static 
} 
.child { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
}

And here’s what the resulting webpage would look like:

这是结果网页的外观：

The child has now escaped the confines of the parent element, since the parent has no position set. And the child has gone up to the next (grand)parent element, in this case the <body> element, which is as far as it can go.

由于父级未设置位置，因此子级现在已摆脱了父级元素的限制。 子级已经向上移动到下一个(父级)父级元素，在本例中为<bo dy>元素，该元素已尽其所能。

(A somewhat sad metaphor would be that this “orphaned” child is looking up the ancestry tree for someone that will be its “parent.”)

(一个可悲的比喻是，这个“孤立的”孩子正在寻找祖先的树，寻找将成为其“父母”的人。)

This is a huge cause of unexpected behavior in CSS for many developers.

对于许多开发人员来说，这是CSS发生意外行为的巨大原因。

If you can remember to always set the parent element of a child element to have position set to relative or absolute (in most cases), you will avoid having your child elements flying up the page to who knows where ?

如果您记得始终将子元素的父元素设置为relative或absolute position (在大多数情况下)，则可以避免让子元素飞到页面上谁知道哪里？

So, to summarize relative and absolute positioning:

因此，总结一下相对和绝对定位：

The main difference between relative and absolute positioning is that position: absolute will take a child element completely out of the normal flow of the document. And that child will be positioned in relation to the first parent element that has its own position set.

相对定位和绝对定位之间的主要区别在于position: absolute将使子元素完全脱离文档的正常流程。 并且该子项将相对于具有其自身位置设置的第一个父项元素进行定位。

The last two position values, fixed and sticky, are similar in some ways to position: absolute. But they also are related to your scroll position on the page.

最后两个position值fixed和sticky在某些方面与position: absolute类似position: absolute 。 但是它们也与您在页面上的滚动位置有关。

Let’s take a look:

让我们来看看：

4.固定 (4. Fixed)

Position: fixed will take the element out of the normal flow, and also position it in the same place in the viewport (what’s visible on screen). This means that scrolling will not affect its position at all.

Position: fixed将使元素脱离正常流程，并将其放置在视口中的同一位置(在屏幕上可见)。 这意味着滚动根本不会影响其位置。

Let’s see what this looks like in the code. Here’s our HTML:

让我们看看代码中的样子。 这是我们HTML：

<div class="first purple"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit....
</div> 
<div class="another green"></div>

And in our CSS, we’ve set the second element to be position: fixed:

在我们CSS中，我们将第二个元素设置为position: fixed ：

.first { 
   position: relative; 
} 
.another { 
   position: fixed; 
   top: 0px; 
   left: 0px; 
}

And this is what that will look like:

这是什么样子：

The green fixed element will stay positioned to the top and left corner of the viewport. And if you scroll, the purple element will scroll up normally, but the green element will remain stuck to where we positioned it.

绿色的固定元素将保持在视口的左上角。 如果滚动，紫色元素将正常向上滚动，而绿色元素将保持固定在我们放置的位置。

Tip: A fixed element must have a top or bottom position set. If it doesn’t, it will simply not exist on the page at all.

提示 ：固定元素必须设置为top或bottom位置。 如果没有，它根本就不会在页面上存在。

Position: fixed is commonly used to make navigation bars that are always affixed to the top. It’s a super helpful property!

Position: fixed通常用于制作始终固定在顶部的导航栏。 这是一个超级有用的财产！

Next, we’ll take a look at sticky positioning, which is like fixed positioning but with a little extra.

接下来，我们将介绍粘性定位，这类似于固定定位，但还有一些额外的功能。

5.粘性 (5. Sticky)

Position: sticky elements will initially behave like position: relative elements, but if you keep scrolling, they will get taken out of the normal flow and behave like position: fixed wherever you have positioned them.

Position: sticky元素最初的行为类似于position: relative元素，但是如果您继续滚动，它们将从正常流程中移出并表现为position: fixed无论它们Position: sticky在什么位置。

This can be really useful if you want to stick an element that’s initially farther down the page to the top of the screen.

如果您想将最初位于页面下方的元素粘贴到屏幕顶部，这将非常有用。

In this code example, we have our green sticky element between two purple elements containing a lot of text. (All the better for scrolling!)

在此代码示例中，我们在两个包含大量文本的紫色元素之间添加了绿色粘滞元素。 (滚动效果更好！)

<div class="first purple"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.... 
</div> 
<div class="another green"></div> 
<div class="purple"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.... 
</div>

And the CSS for our sticky element:

还有CSS作为我们的粘滞元素：

.first { 
   position: relative; 
} 
.another { 
   position: sticky; 
   top: 0px; 
}

And here’s what it looks like on the webpage!

这就是网页上的样子！

As you scroll down the page, when you see the green element come into the viewport, it seems like a normal, relatively positioned element. But as you keep scrolling, instead of scrolling off the page, it will become fixed and stick to the top of the viewport.

向下滚动页面时，当看到绿色元素进入视口时，它看起来像是一个普通的，相对定位的元素。 但是当您继续滚动时，它不会固定在页面上，而是会固定并停留在视口顶部。

Just like fixed elements, a sticky element must have top or bottom set in the CSS. If it doesn’t have it, the element will continue to behave as if it was relatively positioned, and will never become sticky.

就像固定元素一样，粘性元素必须在CSS中设置top或bottom 。 如果没有它，该元素将继续表现为相对定位，并且永远不会发粘。

A note on browser support:

关于浏览器支持的说明：

Currently, position: sticky doesn’t have complete support across the board. Newer browser versions do support it, but no versions of IE do. This may be important if you’re working on a client project where IE 11 support is necessary. You can check out the current support on CanIUse.com

目前， position: sticky还没有全面支持。 较新的浏览器版本支持它，但IE版本不支持。 如果您在需要IE 11支持的客户端项目上工作，这可能很重要。 您可以在CanIUse.com上查看当前支持

在结束时 (In closing)

I hope that you’ve found this tutorial and code examples on CSS positioning helpful! If you have any questions or feedback, feel free to leave a comment below ?

我希望您发现本教程和有关CSS定位的代码示例对您有所帮助！ 如果您有任何疑问或反馈，请随时在下面发表评论？

Other resources:

其他资源：

• Mozilla Developer Network: CSS Position

  Mozilla开发人员网络：CSS位置

• CSS Tricks: position

  CSS技巧：位置

想要更多？ (Want more?)

I'm creating a course in responsive design! Sign up here to get emailed when it's published.

我正在创建响应式设计课程！ 在这里注册以通过电子邮件发送。

I write web development tutorials on my blog coder-coder.com, post mini-tips on Instagram and coding tutorials on YouTube.

我在自己的博客oder-coder.com上编写了Web开发教程，在Instagram上发布了小技巧，在YouTube上发布了编码教程。

翻译自: https://www.freecodecamp.org/news/how-to-use-css-position-to-layout-a-website-with-example-code-38592bb9e276/

css左右布局代码