Question 217844 in Html Question posted in
Some basic documentation can be found here.

Html – How to place div below the image in the div container using flex?

What is the simplest way to place div above the image in the div container using flex box?

The expected result is shown in the image example.

That is the starter code:

 <div className={"main"}>
    Корзина
    <div>
        <div className={"num"}>1</div>
        <image/>
    </div>
</div>

I am expecting this result where the number 1 is under the red circle:

Tags:

3

Answers


  1. 0

    Put the container position: relative and the image position: absolute and then use flexbox for alignment.

    .parent-container{
  display: flex;
  align-items: center;
}

.container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
}

.container img{
  position: absolute;
  z-index: -1;
}
    <div class="parent-container">
  Корзина
  <div class="container">
    <div>1</div>
    <img src="https://picsum.photos/seed/picsum/50/50" alt="">
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Can you please elaborate it which div exactly you need under the image and there are many div element in this example

    I got it what you want

    enter image description here

    div.main {
display:flex;
align-items: center;
color:white;
background-color: black;
width: 120px;
justify-content: center;

}
  .container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.number{
    position: absolute;
}

<div class="main">
    Корзина
    <div class="container">
        <div class="number">1</div>
        <img src="https://img.icons8.com/?size=512&id=Zyo5wDjgJxRW&format=png" alt="image" height="40" width="40"/>
    </div>
    </div>
    Login or Signup to reply.
  3. 0

    We can provide background on the upper div and place other content inside the inner div. The position properly handles those things here, so we can have inner div content on top of the upper div.

    #background{
 display: flex;
 background-image: url("https://e1.pxfuel.com/desktop-wallpaper/908/281/desktop-wallpaper-non-copyrighted-no-copyright.jpg");
 position:relative;
}
#content{
 font-size:40px;
 color:red;
 padding:20px;
 margin:100px auto 100px auto;
}
    <!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="background">
    <div id="content">
        Your content goes here
    </div>
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search