How do achieve absolute positioning in the element not the parent with bootstrap?

Question

I am having some difficulty with absolute positioning in the element and not the parent with bootstrap.

The desired behaviour should be a 1px line running through the middle of the h3 (after other styling "behind"). The CSS comes from another theme and works there. However, with the bootstrap framework the bottom: 50%; is 50% of the way down the containing element which is miles off.

This is my CSS

#sidebar .widget-title:after {
   background-color:#485729;
}

.widget-title:after {
   position: absolute;
   content: "";
   bottom: 50%;
   left: 0;
   width: 100%;
   height: 1px;
   background: transparent;
}

This is the HTML in question

 <div class="order-md-1 col-md-3" id="sidebar">
    <h3 class="widget-title"><span>My Nice Title</span></h3>
    <p><a href="#">LINK!</a></p>
    <h3 class="widget-title"><span>Hello World</span></h3>
    <!-- lots of Lorem Ipsum -->
 </div>

The net result should look like:

--- My Nice Title -----------

Instead, the line is halfway down the page.

    My Nice Title 


-----------------------------

All of the lines for the h3 elements are in exactly the same location. This leads me to believe that the positioning is 50% of the parent div and not the h3. As this works on the non-bootstrap theme, my guess is bootstrap does something just different enough to trip me up. I am not sure what though.

How do I go about achieving the desired behaviour?

For your specific case, adding `top: 30px;` to `.widget-title:after` get the line on top of the text. You will have to play around with z-index or add a separate element for line to achieve the desired result of line behind the text. — Waleed Iqbal, Jul 18 '19 at 05:22

JasonB · Answer 1 · 2019-07-18T05:24:43.807

Make sure that the .widget-title element has position: relative; instead of the default static positioning. The line is just finding the first ancestor that has relative or absolute positioning. Also, you may want to use z-index to explicitly put the line behind or in front of the text.

#sidebar .widget-title {
  position: relative;
}

.widget-title:after {
  position: absolute;
  content: "";
  bottom: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #485729;
  z-index: -1;
}

<div class="order-md-1 col-md-3" id="sidebar">
  <h3 class="widget-title"><span>My Nice Title</span></h3>
  <p><a href="#">LINK!</a></p>
  <h3 class="widget-title"><span>Hello World</span></h3>
  <p><a href="#">LINK!</a></p>
</div>

Helpful reference: https://css-tricks.com/almanac/properties/p/position/ — Tieson T., Jul 18 '19 at 05:20

score 0 · Answer 2 · answered Jul 18 '19 at 05:20

When you use position: absolute; you must required position: relative; to that parent.

Also to get the dashed border can be achived with css pseudo classes.

Check attached snippet to get the desire output.

#sidebar .widget-title:after {
   background-color:#485729;
}

h3.widget-title {
    position: relative;
    z-index: 1;
  width:490px;
  left:20px;
    
}
 h3.widget-title:before {
        border-top: 1px dashed #000;
        content:"";
        margin: 0 auto; 
        position: absolute; 
        top: 50%; left: -80px; right: 0; bottom: 0;
        width: auto;
        height:1;
        z-index: -1;
    }
span { 
        background: #fff; 
        padding: 0 15px; 
    }

<div class="order-md-1 col-md-3" id="sidebar">
    <h3 class="widget-title"><span>My Nice Title</span></h3>
    <p><a href="#">LINK!</a></p>
    <h3 class="widget-title"><span>Hello World</span></h3>
    <!-- lots of Lorem Ipsum -->
 </div>

score 0 · Answer 3 · answered Jul 18 '19 at 05:42

Hi @Matthew Brown I think this code also help you,

<style>

.hr1 {
  border-style:dashed; margin-top:2.5%; 
  width:40%;    margin-left:2%;
 }
 .hr2 {
  border-style:dashed; margin-top:-0.7%; 
  width:40%;    margin-left:52%;
 }
 .title 
 { margin:-1.5% 0% 0% 43%; }

</style>

<body>

<div class="order-md-1 col-md-3" id="sidebar">
  <hr class="hr1"> <h3 class="title" >My Nice Title</h3> <hr class="hr2">   

  <p><a href="#">LINK!</a></p>

  <h3 class="widget-title"><span>Hello World</span></h3>
  <!--  lots of Lorem Ipsum -->
</div>

</body>

How do achieve absolute positioning in the element not the parent with bootstrap?

3 Answers3