css Question posted in
Some basic documentation can be found here.

Css – Is there another way I can overlap items without using absolute position?

I’m working on my portfolio which contains background graphics that should go behind texts. Everything looks good now because I positioned everything using absolute positioning and by defining the exact pixels from the top. However, I know this is bad practice and won’t be the best option when it comes to responsiveness.

Whenever I try to use the other options such as relative and flex, the items don’t overlap anymore and the texts are placed under the background graphics.

I know it’s a dumb question, but how exactly should I make a responsive layout with background graphics?

I tried flex and relative positioning, and it isn’t the result I need.

Tags:

2

Answers


  1. 0

    It’s hard to help without knowing exactly what you want to achieve, there are many ways to overlap things in html/css but they are all a bit iffy and circumstantial. Most often relative positioning is a better option than absolute.
    Not sure this will help but here are two tricks which probably aren’t best practice but can work in a pinch.

    1. CSS Transfrom

    If you know exactly how you want things to overlap you can use CSS transforms to move elements around.

    .box {
  width: 30px;
  height: 30px;
}

#A {
  background: blue;
}

#B {
  background: red;
  transform: translate(15px, -15px);
}
    <div class="box" id="A">
</div>
<div class="box" id="B">
</div>

    2. Putting elements in a zero sized div

    If you put your background inside a div which has a height and width of 0px then it will kind of float behind the other elements.

    main {
  width: 200px;
  overflow: hidden;
}

#no_size {
  width: 0px;
  height: 0px;
}

#background {
  width: 1000px;
  height: 1000px;
  background: orange;
}
    <main>

<div id="no_size">
  <div id="background"></div>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</main>

    Layout in CSS is hard, good luck!

    Login or Signup to reply.
  2. 0

    It’s not a dumb question at all! Creating a responsive layout with background graphics while ensuring text overlays can be achieved using various techniques. Here are some suggestions:

    CSS Grid: Utilize the CSS Grid layout. You can position items within grid cells and layer them using z-index to ensure the text overlays the background graphics.

    Position Property: Instead of absolute positioning, use relative or absolute positioning within a parent container that has a defined position. Combine this with z-index to control the stacking order.

    Background Image: Set the background image for a container and use padding to create space for text without affecting the background. Adjust the padding based on the screen size using media queries for responsiveness.

    Overlay Technique: Create a separate div for the background graphics and place it behind the text using z-index. T

    .container {
  position: relative;
  /* Other styles for container */
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Set background image and other styles */
  background-image:url("");
  background-size:cover;
  background-position:center center;
}

.content {
  position: relative;
  z-index: 1;
  /* Other styles for content */
}
    <div class="container">
  <div class="background"></div>
  <div class="content">
    <h1>Your Title</h1>
    <p>Your text here...</p>
  </div>
</div>

    hen position the text element with a higher z-index value to ensure it’s displayed on top.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search