Question

我想知道是否可以在不使用jquery或flex box的情况下将第一个div设置在第二个div之后。

有什么办法吗？

＆＃13;

.container {}

.one {
  background-color: #FF0004;
  float: right;
}

.two {
  background-color: #000DFF;
  float: left;
}

＆＃13;

<body>
  <div class="container">

    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>

    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>

  </div>
</body>

＆＃13;

谢谢！

Answer 1

将父div position:relative和position:absolute提供给子div。现在，您可以使用top:10px和left:10px来处理div的位置。

＆＃13;

.container {
position:relative;
}
.one {
    background-color: #FF0004;
    float: right;
}
.two {
    background-color: #000DFF;
    float: left;
    position:absolute;
    top:10px;
    left:10px;
    
}

＆＃13;

<div class="container">

    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>

    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>

</div>

＆＃13;

Answer 2

您可以使用 z-index

＆＃13;

.container {}

.one {
  background-color: #FF0004;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: -1;
}

.two {
  background-color: #000DFF;
}

＆＃13;

<div class="container">

  <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>

  <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>

</div>

＆＃13;

订购第二个后面的第一个div

2 个答案: