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:

其他資源：