Position absolute and overflow hidden
Make outer <div>
to position: relative
and inner <div>
to position: absolute
. It should work for you.
Why does position absolute make page to overflow?
I think I know where this question comes from. You must be confused by people using (negative) absolute positioning on the LEFT side of the screen when they want an element to be off screen WITHOUT horizontal scrollbars. This is a common technique for sliders, menu's and modals.
The thing is that a negative LEFT allignment does NOT show overflow on the body, while a negative right allignment does. Not very logical... I know.
To illustrate this I created a pen with the absolute element on the left: left: -100px;
http://codepen.io/anon/pen/vGRxdJ and a pen with the absolute element on the right: right: -100px;
http://codepen.io/anon/pen/jqzBZd.
I hope this takes away your confusion.
As to why this happens: I have always understood that the top left corner of the screen is x:0, y:0: the origin of a coordinate system consisting only of positive values (which is mirrored horizontally in the RTL case). Negative values in this coordinate system are 'off-canvas' and thus need no scrollbar, while 'on-canvas' elements do. In other words: on-canvas elements will enlarge your page and make your view automatically scrollable (unless instructed otherwise), while off-canvas elements will not.
Css Position Relative/Absolute is disturbing the Layout
I'd rather not use position: absolute where it's not needed because it breaks the flow. You need only position relative or negative margin-top to move the element up. See example https://jsfiddle.net/DTcHh/29623/
<header class="container-fluid header">
<div class="row">
<h1>HEADER</h1>
</div>
</header>
<section class="container">
<div class="row position-relative">
<div class="col-sm-10 col-sm-offset-1 position-relative-col">
<div class="height">
<h2>Some Portfolio items here</h2>
</div>
</div>
</div>
</section>
<section class="container trouble">
<div class="row">
<h3>Slider Troubling section</h3>
</div>
</section>
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.header {
background: lightblue;
padding:25px;
}
.position-relative {
position:relative;
}
.position-relative-col {
background: green;
position: relative;
top: -50px;
}
.trouble {
background: darkblue;
opacity: 0.8;
color: white;
}
.height {
height: 100px;
}
Absolute position and Overflow:hidden
It's completely impossible to do what you want with both overflow: hidden
and position: relative
on the parent div
.. instead you can introduce an extra child div
and move overflow: hidden
to that.
See: http://jsfiddle.net/thirtydot/TFTnU/
HTML:
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
CSS:
#parent {
position:relative;
background:red;
width:100px;
height:100px
}
#child {
position:absolute;
background:#f0f;
width:300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
#parent {
position: relative;
background: red;
width: 100px;
height: 100px
}
#child {
position: absolute;
background: #f0f;
width: 300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
Position relative and absolute
When you have an element with position: absolute
that element is placed relatively to its closest positioned parent. A positioned element is any element with position
different from static
, be it relative
, absolute
or fixed
.
In your case you have a .wrapper
with position: relative
and h1
inside it with position: absolute
, that is why the latter is positioned 60 pixels from the top of its parent.
If you insist of the child element being below the parent, add z-index: -1
to it - http://jsfiddle.net/jt92sedr/4/
This property applies only to positioned elements.
You can check: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Position Relative vs Absolute?
Absolute CSS Positioning
position: absolute;
Absolute positioning is the easiest to understand. You start with the CSS position
property:
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.
If you want to position an element 10 pixels from the top of the document window, you would use the top
offset to position
it there with absolute
positioning:
position: absolute;
top: 10px;
This element will then always display 10px
from the top of the page regardless of what content passes through, under or over the element (visually).
The four positioning properties are:
top
right
bottom
left
To use them, you need to think of them as offset properties. In other words, an element positioned right: 2px
is not moved right 2px
. It's right side is offset from the right side of the window (or its position overriding parent) by 2px
. The same is true for the other three.
Relative Positioning
position: relative;
Relative positioning uses the same four positioning properties as absolute
positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
For example, if you have three paragraphs on your Web page, and the third has a position: relative
style placed on it, its position will be offset based on its current location-- not from the original sides of the view port.
Paragraph 1.
Paragraph 2.
Paragraph 3.In the above example, the third paragraph will be positioned3em
from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute;
, anything following it would display on top of it, because it would no longer be in the normal flow of the document.Notes:
the default
width
of an element that is absolutely positioned is the width of the content within it, unlike an element that is relatively positioned where it's defaultwidth
is100%
of the space it can fill.You can have elements that overlap with absolutely positioned elements, whereas you cannot do this with relatively positioned elements (natively i.e without the use of negative margins/positioning)
lots pulled from: this resource
Why does absolute position ignore elements with static positions?
For one thing, the premise is incorrect. There are situations where a statically positioned element can provide the containing block of an absolutely positioned element. position
, transform
, will-change
and contain
are all properties that will cause an element to establish an absolute positioning containing block
For example:
.outer {
width:50vw;
height:50vh;
background-color:lightblue;
margin: 25vh 25vw;
transform:translateX(0);
}
.inner {
position:absolute;
width:100px;
height:50px;
inset: 0;
background-color:red;
}
<div class="outer">
<div class="inner"></div>
</div>
Related Topics
How to Add Background Image in CSS
Background Size Cover Ie11 Not Covering Full Area
Vertically Aligning Block Element to Image
Using Calc() to Transition Width and Height in Ie
Using HTML Attributes as CSS Property Values
Chrome Print Preview Doesn't Load @Media Only Print Font-Face
Showing The Jsf Error Messages
CSS Animation Works in Chrome But Not Safari
Setting Linear Gradient Height and Width
Horizontal Navigation with Logo in Middle
How Does Bootstrap Switch from One Class to The Next
Stack CSS Transitions Using Multiple Classes Without Overriding
How to Break Lines in Urls in Stylesheet
Google Fonts External CSS Vs Copying The Code of External CSS in My CSS
Why Does Visual Studio 2013 Recognize CSS3 Display: Flexbox, But Not Flex