'How can I overlap image in css

I nearly spend 4 hours trying to make this layout. I tried absolute positioning but obviously, It's not responsive.

Image is 660px and Right container is 860px.

    <div className="container">
        <div className="image-container">
     <img src={image} />
     </div>

<div className="right-container">
<div className="insde-some-text">

</div></div>
csssassflexboxgridcss-position


Solution 1:[1]

As far as my knowledge goes, you can only do this by position absolute and then changing the widths at certain breakpoints using media queries.

Solution 2:[2]

To add to what Khubaib said, you would want to use position: absolute in your .css file. Also, using scalable quantities for the boxes will help you for the certain screen sizes that you want your site displayed on.

Also, you can use position: relative on blue block and make the attribute top: -100px or so. This blue-block will always be relative to its normal position.

.red-block
{
    width: 20rem;
    height: 20rem;
    background-color: red;
    position: absolute;
}
.blue-block
{
    width: 20rem;
    height: 20rem;
    background-color: blue;
    position: absolute;
    top: 50%;
    left: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <div class = "red-block">
    </div>
    <div class = "blue-block">
    </div>
</body>
</html>

Solution 3:[3]

You could use this for reference. Simple demonstration using flex and margin.

.wrapper {
  width: 100%;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5%;
  width: 100%;
}

.right-container {
  border: solid red 1px;
  border-radius: 5px;
  width: 860px;
  height: 860px;
  background-color: #e1e1e1;
  text-align: center;
}

textarea {
  height: 80%;
  width: -webkit-fill-available;
  text-align: center;
  background-color: lightblue;
}

.img {
  margin-right: -3em;
  position: relative;
}

img {
  max-width: 100%;
}
<div class="wrapper">
  <div class="container">
    <div class="img">
      <img src="https://dummyimage.com/660x400/000/fff" alt="">
    </div>
    <div class="right-container">
      <textarea placeholder="hello world"></textarea>
      <p>foooooooooooooooooooooo</p>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Khubaib Tariq
Solution 2 Michael
Solution 3 Kameron

Related Questions