Need to put div between two div elements-CodePudding

I need to get this div

My code:

.wrapper {
  display: flex;
  height: 100px;
  width: 300px;
}

.div1 {
  background-color: red;
  width: 100px;
}

.div2 {
  background-color: green;
  width: 100px;
}

.div3 {
  background-color: yellow;
  width: 100px;
}

<div >
  <div >
    1
  </div>
  <div >
    1
  </div>
  <div >
    1
  </div>
</div>

I want to get this third div between two div elements but I don't know how. Need it for the school project. Please help.

Thanks in advance!

CodePudding user response：

The boxes you've labelled 1 and 2 need to be rectangles. Essentially, this means that Box #3 is visually placed in front of boxes 1 and 2. In order to achieve this, you can use position: absolute on .div3 whilst also setting position: relative on your .wrapper. This is because children set to absolute positioning inside of a relatively positioned parent, are positioned in reference to the parent.

.wrapper {
  display: flex;
  height: 100px;
  width: 300px;
  position: relative;
}

.div1 {
  background-color: red;
  width: 100px;
}

.div2 {
  background-color: green;
  width: 100px;
}

.div3 {
  background-color: yellow;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 50px;
  top: 50%;
}

Additionally, I recommend removing the white space within your curly brackets just to keep your code more simple.

CodePudding user response：

It's quite simple, the third div should overlap the two, for that it should be freely movable wrt to its parent to achieve this add a position: absolute, and add position relative to the parent

  .div3{
    position: absolute;
    height: 40px;
    bottom: 0;
    left:50px;
    }

.wrapper{
position : relative;
}

CodePudding user response：

Use position: absolute on the third div and position: relative on its parent container.

<div >
  <div >
    1
  </div>
  <div >
    1
  </div>
  <div >
    1
  </div>
</div>

.wrapper {
  display: flex;
  height: 300px;
  position: relative;
  width: 300px;
}

.div1 {
  background-color: red;
  flex: 50%;
  width: 100px;
}

.div2 {
  background-color: green;
  flex: 50%;
  width: 100px;
}

.div3 {
  background-color: yellow;
  bottom: 0;
  position: absolute;
  margin: auto;
  width: 50%;
}

CodePudding user response：

You'll need to absolutely position the <div> element inside its container after making the container itself relatively positioned. This allows you to place the element wherever you'd like inside the relative container.

To achieve the desired position, you can pull the element to the bottom, push it to the left by half the size of its container, then push it back by half its own size to center it using a transformation.

Here's what the code looks like:

.wrapper {
  width: fit-content;
  height: 180px;
  display: flex;
  /* relatively position the container */
  position: relative;
}
.div1 {
  width: 100px;
  height: 180px;
  background-color: red;
}
.div2 {
  width: 100px;
  height: 180px;
  background-color: green;
}
.div3 {
  width: 100px;
  height: 100px;
  /* absolutely position the element */
  position: absolute;
  /* pull it to the bottom */
  bottom: 0px;
  /* push it from the left by half the size of the container */
  left: 50%;
  /* push it back by half its size to center it */
  transform: translate(-50%, 0%);
  background-color: yellow;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
</div>