[Snippet] CSS - Child element overlap parent - The Koch Family
The Koch Family The Koch Family

Latest news

جاري التحميل ...

[Snippet] CSS - Child element overlap parent

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below:
HTML code:
<div id="parent">
 <div id="child">

And, CSS:
  position: relative;

  position: absolute;
  top: -1;
  right: -1px;

However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it.


I tried to create an example to investigated this problem by Fiddle. Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved.
Look at my code:

<div class="modal-body dn-placeholder-parent-position">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Name</label>
<div class="col-sm-9">
<div class="form-group">
<label class="col-sm-2">Help text</label>
<div class="col-sm-9">
<div class="col-sm-3 dn-placeholder-position">
position: static;

padding: 0px;
margin-top: 7px;
position: absolute;
right: -93px

Can check my example here: https://jsfiddle.net/qo44z771/


[1]. http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent
[2]. http://stackoverflow.com/questions/14605639/how-to-overlap-parent-div-from-child-div


If you like the content of our blog, we hope to stay in constant communication, just enter your email to subscribe to the blog's express mail to receive new blog updates, and you can send a message by clicking on the button next ...

إتصل بنا

About the site

author The Koch Family <<  Welcome! I'm so glad that you stopped by Your Modern Family blog. Together, we will talk about raising kids, organizing the home and saving money! and Tips & tricks and more…

< Learn more ←

Blog stats

Sparkline 2513183

All Copyrights Reserved

The Koch Family