Question

是否有可能＆＃34;移动＆＃34;一个全宽度元素低于另一个，所以它只显示在上面只使用CSS / HTML？（而不是更改标记顺序）

<div id="first">first</div>
<div id="second">second</div>

#first {…}
#second {…}

理想的结果：

second
first

Answer 1

您可以使用CSS Flexible Boxes。特别是order属性。

在这个例子中，我添加了宽度和背景颜色以帮助可视化。请注意，CSS灵活方框的浏览器支持仅限于IE 10 +，Chrome 21 +，Firefox 20+等现代浏览器，在移动浏览器（尤其是旧版浏览器）中可能效果不佳。

＆＃13;

.container {
  display: flex;
  flex-direction: column;
}

#first {
  order: 2;
  
  width: 10em;
  margin-top: 1em;
  background-color: orange;
}
#second {
  order: 1;
  
  width: 10em;
  background-color: yellow;
}

＆＃13;

<div class='container'>
  <div id=first>
    first
  </div>
  <div id=second>
    second
  </div>
</div>

＆＃13;

Answer 2

只有你知道第二个元素的确切高度：

#first {
    margin-top: 20px;
}

#second {
    top: 0;
    position: absolute;
}

http://jsfiddle.net/9zmcnedy/

Answer 3

Js Fiddle

类似这样的事情

#first { position:relative; top:18px}
#second {position:relative; bottom:18px}

Answer 4

使用position: absolute进行解决方法，但这有一个缺点，即当子容器（第一个元素）高度增加时，父元素不会拉伸高度。（要修复你应该使用javascript ）

<强> CSS

.container {
    border: 1px solid green;
    display: inline-block;
    position: relative;
}
#first {
    position: absolute;
    top: 100%;
}

<强> Working Fiddle

使用css / html将一个元素移到另一个元素之前

4 个答案: