矩形重叠

Question

以下是我正在尝试的图片;我设法使用CSS得到一个矩形，但我正在尝试在另一个上面的矩形。

＆＃13;

＆＃13;

#dragtarget2 {
  float: left;
  clear: left;
  width: 176px;
  height: 76px;
  background: #968282;
  border-radius: 13px;
}

＆＃13;

<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
  <p>meter</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将矩形position: absolute和容器设为position: relative。 这是您正在寻找的代码。

＆＃13;

＆＃13;

.container{
    position: relative;
}

.first , .second, .third {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 40px;
  background-color: gray;
  border-radius: 4px;
  border: 2px solid red;
}

.second{
  top: 4px;
  left: 4px;
}

.third{
  top: 8px;
  left: 8px;
}

＆＃13;

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用const imageFile = request.file('image', { maxSize: '10mb', allowedExtensions: ['jpg', 'png', 'jpeg','JPG'] }) yield imageFile.move(Helpers.storagePath()) if (!imageFile.moved()) { return response.badRequest(imageFile.errors()) } / position: absolute从元素的原点位置移动元素。使用position: relative将元素移到其他元素的上方/下方（更高的z-index - 更高的元素位置）。

＆＃13;

＆＃13;

z-index

＆＃13;

.border {
  border: 2px solid red;
  background-color: #aaa;
  width: 200px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.border:nth-child(2) {
  left: 5px;
  top: 5px;
  z-index: 6;
}
.border:nth-child(3) {
  left: 10px;
  top: 10px;
  z-index: 7;
}
.wrapper {
  margin: 10px;
  /* NOTE: this does not effect absolute elements */
  padding: 10px;
  /* NOTE: this will be origin of absolute elements coordinates */
  position: relative;
}

＆＃13;

＆＃13;

＆＃13;

使用较少的HTML：

＆＃13;

＆＃13;

<div class="wrapper">
  <div class="border">1</div>
  <div class="border">2</div>
  <div class="border origin">SmartMeter</div>
</div>

＆＃13;

.wrapper {
  position: relative;
  margin: 10px;
}
.border {
  position: relative;
}
.border span,
.border:before,
.border:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid red;
  background: #aaa;
  display: inline-block;
  width: 200px;
  height: 50px;
  line-height: 50px;
}
.border:after {
  left: 5px;
  top: 5px;
  z-index: 6;
}
.border span {
  left: 10px;
  top: 10px;
  z-index: 7;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

我添加了两个外部div，以便代码如下。

#dragtarget2 {
  float: left;
  clear: left;
  width: 176px;
  height: 76px;
  background: #968282;
  border-radius: 13px;
  border: 2px solid;
  padding: 2px;
}
.dragtarget0 {
  float: left;
  clear: left;
  width: 176px;
  height: 76px;
  border: 2px solid;
  border-radius: 13px;
  padding: 2px;
  margin: 2px;
}
.dragtarget1 {
  float: left;
  clear: left;
  width: 176px;
  height: 76px;
  border: 2px solid;
  border-radius: 13px;
  padding: 3px;
}

<div class="dragtarget0">
  <div class="dragtarget1">
    <div id="dragtarget2">
      <p>meter</p>
    </div>
  </div>
</div>