Twitter Bootstrap Question posted in

Position absolute re-aligning all of the div tags – Twitter bootstrap

I am using Twitter Bootstrap in order to build a project where you can select different colours of a image where they will change. I have managed to achieve that, but I am using multiple parts of a image to build up the actual image, this is so I can achieve the colour changing aspects.

I have researched and I have done position absolute, which in theory achieves what I want by having the images stacked on top of one another. However, the div tag that is meant to be positioned underneath appears on top of the image.

I’m wondering if anyone can please help me?

Here is my code:

<div class="container">
    <div class="col-md-6">
        <div class="row" align="center">
            <h1>Main Header</h1>
        </div>
        <div class="row" align="center">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
        </div>
        <div class="row">Text here</div>
    </div>
</div>

Then I have the CSS which is:

img.xbox {
position: absolute;
top: 50px;
left: 50px; }

I have also used the z-index on the parts of the controller with an class and the picture appears as it should, it’s just the div tag appears above the image rather than below.

Thank you in advance.

Tags:

2

Answers


  1. 0

    An element in absolute position doesn´t have a place in the DOM flow. So you have to add a margin or padding to the next element that do have a place in the flow.

    Like this

    .text {
 margin-top : 250px; 
}
    Login or Signup to reply.
  2. 0

    As element with position: absolute are taken out from the normal flow of DOM so you need to wrap your images in a <div> element with specified width and height as per your needs… You can try this code…

    .image-box {
  position: relative;
  height: 200px; // modify this as per your needs
  width: 200px; // modify this as per your needs
}
    <div class="row" align="center">
  <div class="image-box">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search