How can I overlap image in css

user_17939803 0
Viewed 48

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>
flexbox css-position sass grid css
3 Answers

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.

user_185073030

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>

user_155600060

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>

user_164963570
Related