CSS 使第二个 div 首先出现在上面，没有绝对位置或更改 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27373685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make second div appear above first, without absolute position or changing html
提问by Vince Emigh
My page is split into 3 slices, as shown in this JFiddle.
我的页面被分成 3 个切片，如这个JFiddle所示。
In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone accesses the site on mobile mode, Logoshould appear at the top, and Itemsshould appear below it. (I set display: noneon my picture div to hide it)
在我的完整源代码中，我有媒体查询来帮助管理移动和桌面之间的大小。当有人在移动模式下访问网站时，徽标应显示在顶部，项目应显示在其下方。（我display: none在我的图片 div 上设置隐藏它）
Problem:
问题：
I can't change the positioning of the divs in HTML, or it'll disturb my current 3 slice layout. Absolute positioning is not an option, since most of my site is already dynamically sized, and I wouldn't want absolute positioning to interfere on a resolution I haven't tested on. This means calculating the margin sizes would be out of the question aswell.
我无法更改 HTML 中 div 的位置，否则会干扰我当前的 3 切片布局。绝对定位不是一种选择，因为我的大部分网站已经动态调整大小，我不希望绝对定位干扰我尚未测试过的分辨率。这意味着计算边距大小也是不可能的。
So, absolute positioning is not allowed, nor is changing the orders of the divs. The result I'm looking for would be similar to this, exception without repositioning the divs.
所以，绝对定位是不允许的，也不允许改变 div 的顺序。我正在寻找的结果将与此类似，但没有重新定位 div 的异常。
My question is not about media queries, or how to size for mobile using media queries. I am only asking about how to get the layout I want with the restrictions in place (no absolute positing, no calculating margins, no changing div order).
我的问题不是关于媒体查询，或者如何使用媒体查询为移动设备调整大小。我只是询问如何在限制到位的情况下获得我想要的布局（没有绝对定位，没有计算边距，没有改变 div 顺序）。
Other questions I looked at:
我看过的其他问题：
Reposition div above preceding element- First answer suggests repositioning divs, which I cannot do. Second answer relies on calculating the position, which could interfere with other dynamically sizing elements.
在前面的元素上方重新定位 div- 第一个答案建议重新定位 div，我不能这样做。第二个答案依赖于计算位置，这可能会干扰其他动态调整大小的元素。
Move The First Div Appear Under the Second One in CSS- Suggests I use absolute positioning, which I cannot do
在 CSS 中移动第一个 Div 出现在第二个下- 建议我使用绝对定位，但我不能这样做
回答by Alohci
Flexbox layout is your friend here. display: flexcan be used to interchange the elements position on the layout.
Flexbox 布局是你的朋友。display: flex可用于交换布局上的元素位置。
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>display: flexworks only in modern browsers. Check caniuse.
display: flex仅适用于现代浏览器。检查caniuse。
A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.
在我的 android 手机上进行的测试显示它可以在 Firefox 和 Chrome 上运行，但不能在股票的 Android 浏览器上运行。
回答by Mr_Green
I tried to solve the solution using transform: translateYproperty in percentage value.
我尝试使用transform: translateY百分比值属性来解决该解决方案。
Note: This works if and only if the two containers have same height. or if the height is already known, then you can set the transform: translateYvalue according to the height.
注意：当且仅当两个容器具有相同的高度时，这才有效。或者如果高度已知，则可以transform: translateY根据高度设置值。
CSS
CSS
@media (max-width: 700px) {
#container > div {
width: auto;
display: block;
float: none;
}
#container #picture {
display: none;
}
#logo {
transform: translateY(-100%);
}
#items {
transform: translateY(100%);
}
}
回答by webeno
Probably the easiest is if you play with minus margins. Note that the below sizes (width and side margins) may need to be adjusted to your specific needs.
可能最简单的是，如果您使用负边距进行游戏。请注意，以下尺寸（宽度和边距）可能需要根据您的特定需求进行调整。
#container * {
width: 95vw;
text-align: center;
}
#items {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: left;
margin-top:30px; /* has to be smaller than the absolute of #logo */
margin-left:25%; /* half of the element's width */
}
#logo {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: right;
margin-top:-40px; /* its absolute has to be greater than the one of #items */
margin-right:25%; /* half of the element's width */
}
#picture {
width: 33%;
float: right;
display:none; /* Hiding #picture as you said you would */
}<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>