How can I overlap image in css-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

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 >
  <div >
    <div >
      <img src="https://dummyimage.com/660x400/000/fff" alt="">
    </div>
    <div >
      <textarea placeholder="hello world"></textarea>
      <p>foooooooooooooooooooooo</p>
    </div>
  </div>
</div>