lock lock - 2 months ago 14
HTML Question

How to Keep element absolute at their location bootstrap 3

I have some problem with position element can not keep absolute position in resize window (in responsive)
after resposive absolute element shift the ratio parent
How i can keep it ?

In bootplay my code (if resized absolute element to the right) :

Bootplay

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 right-section">
right
</div>
<div class="col-md-9">
<div class="row">

<div class="col-md-3">
<div class="image"></div>
<div class="type">Element</div>
</div>
<div class="col-md-3">
<div class="image"></div>
<div class="type">Element</div>
</div>
<div class="col-md-3">
<div class="image"></div>
<div class="type">Element</div>
</div>
<div class="col-md-3">
<div class="image"></div>
<div class="type">Element</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>


CSS :

/* CSS used here will be applied after bootstrap.css */

.right-section {
background-color: #e3e3e3;
}

.image {
width: 200px;
height: 200px;
background-color: #9EC7E3;
border-radius: 50%;
}

.type {
background-color: red;
position: absolute;
top: 120px;
right: 5px;
padding: 10px;
}

Answer

The problem is that the absolutely positioned <div class="type">Element</div> elements are positioned relative to the column divs, not the <div class="image"></div> circles.

If you move the absolutely positioned element inside the circle image divs, and then make those position: relative;, you should get what you're after:

HTML:

<div class="col-md-3">
    <div class="image">
        <div class="type">Element</div>
    </div>
</div>

CSS:

.image {
  width: 200px;
  height: 200px;
  background-color: #9EC7E3;
  border-radius: 50%;
  position: relative;
}