I have this
<div id="container">
<div id="div1"></div>
<div>
Now, let's assume that:
the "container" has a width of 300px
the "container" has overflow: hidden;
the "div1" has a width of 1000px;
the "div1" is absolute positioned, top:0px,left:0px;
The problem:
The "div1" is not hidden, it overflows the "container" but it's still showing :(.
If I simply remove the "position:absolute" it will work.
How can I hide the overflow of "div1" ?
Add position: relative to container div element.:
Exa:
<style type="text/css">
#container
{
width: 200px;
background-color: red;
height: 60px;
color: white;
position: relative;
overflow: hidden;
}
#div1
{
background-color: blue;
position: absolute;
top:0px;
left:0px;
width: 300px;
}
</style>
<div id="container">
<div id="div1">This is div1</div>
<div>
adding
#container { position: relative; }
will hide the overflow.
Adding position absolute to an element will remove that element from the normal flow.
It will position itself absolute to the closest parent that is relatively positioned.
This is why adding "position:relative" to the "container" will achieve the desired effect.
Related
Please check the JSFIDDLE code here.
I have an absolute positioned child and a relative positioned parent. I expect to see the entire absolute positioned child at all circumstances. When I place the overflow : auto for the grandparent, it's hiding the absolute positioned element within the scroll.
What I am seeing is this (Absolute child hidden in scroll):
What I want to see is (Able to see the entire absolute child with overflow: auto set on the grand parent):
.GrandParent {
width: 200px;
height: 200px;
background-color: red;
overflow: auto;
}
.Parent {
width: 150px;
height: 150px;
background-color: blue;
position: relative;
z-index: 500;
}
.Child {
width: 300px;
height: 300px;
background-color: grey;
position: absolute;
left: 0;
top: 100%;
opacity: 0.5;
}
<body>
<div class="GrandParent">
<div class="Parent">
<div class="Child">
</div>
</div>
</div>
</body>
This is because the .Child is relative to the .Parent not the .GrandParent. The .Parent's content is being hidden via overflow: auto on it's container element which is the .GrandParent. One way of solving this issue is to have another container that the .Child is relative to. In my code example below, .Child will no longer be relative to parent so the positioning can get tricky. This is one of the reasons why libraries such as popperjs was created. You will need JavaScript to reposition the .Child on-scroll.
.MainContainer {
position: relative;
}
.GrandParent {
width: 200px;
height: 200px;
background-color: red;
overflow: auto;
}
.Parent {
width: 150px;
height: 150px;
background-color: blue;
z-index: 500;
}
.Child {
width: 300px;
height: 300px;
background-color: grey;
position: absolute;
top: calc(100% - 50px);
left: 0;
opacity: 0.5;
}
.some-modal-content {
height: 1000px;
}
<body>
<div class="MainContainer">
<div class="GrandParent">
<div class="Parent">
<div class="Child">
</div>
</div>
<div class="some-modal-content"></div>
</div>
</div>
</body>
Child is out of the document flow(new block formatting context), just offset relative to Parent；
Child box inside Parent (relative), but overflowed, set Parent overflow property to control layout visibility;
Child + Parent box inside GrandParent, overflowed, set GrandParent overflow property to control layout visibility;
They have a ‘wrapped’ relationship, The content outside the area is controlled by the outer overflow property。
Except for fixed attribute positioning, other positioning is controlled by the wrapping layer, automatically height content, or scrolling, or being cropped and hidden.
position - CSS: Cascading Style Sheets | MDN
overflow - CSS: Cascading Style Sheets | MDN
Through the wrap layer we generally control the display of the inner layer in this way.
active may be come from a click event, or hover event, etc.
<div class="GrandParent active">
<div class="Parent">
<div class="Child"></div>
</div>
</div>
.Child { display:none; ... }
.GrandParent.active .Child { display:block; }
I am trying to put a position:fixed div inside an another div. I want a fixed div which has a width:100%; so it will be great for mobile and desktop at the same time.
Here is my JSfiddle
SF wants some code:
<div id="container">
<div id="item">This div is good div</div>
<div id="fixed">Right side of this div overflow its parent!!! </div>
</div>
An element with position: fixed; ignores the parent size because it is relative only to the viewport:
MDN:
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
You can:
Try giving it position: absolute; and set the container to position: relative;.
Use position: fixed; and set the size explicitly.
You can use the calc() method to adapt the viewport size. Just subtract right and left margin from the 100%:
Edit: I added a min-height to the body to see the "fixed-effect" on scrolling
body {
margin: 0;
min-height: 1000px;
}
#container {
margin: 10px;
background: black;
color: white;
}
#item {
height: 50px;
width: 100%;
}
#item {
background: blue;
}
#fixed {
height: 50px;
width: calc(100% - 20px);
background: green;
position: fixed;
}
<div id="container">
<div id="item">Normal div</div>
<div id="fixed">Fixed div</div>
</div>
I have this code to show absolute div into relative div.
html:
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="relative">
<div class="absolute">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div>
</div>
</div>
<div class="col-md-12">
normal text added
</div>
</div>
</div>
</section>
css:
.relative {
position: relative;
height:auto;
background-color:#e1e1e1;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
background-color: white;
width: auto;
background-color:#f5f5f5;
margin:0 15px;
}
In reality when I set height:auto for relative div this div is not showing. If I set any height value ie: height:150px; relative div it works and shows true. How do I fix this problem ?
demo here
You can't do this with css, and need to set the height on your outer div with position:relative for your inner position:absolute to show.
This is because when you set a <div> to be position:absolute, the outer container no longer has the concept of its width and height and will not accommodate the space it takes up.
add overflow :hidden; min-height:100px;
.relative {
position: relative;
height:auto;
overflow :hidden;
min-height:100px;
background-color:#e1e1e1;
}
Here the trick
CSS
.relative {
position: relative;
overflow :hidden;
min-height:100px;
background-color:#e1e1e1;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
background-color: white;
width: auto;
background-color:#f5f5f5;
margin:0 15px;
overflow: auto;
height: 100px;
}
DEMO
Set the relative height and absolute height
Below is the code I am working on. As you can see, there is a '#parent' div and a '#child' div. the '#child' div has an undefined height, this is because sometimes, the height of the '#child' is smaller or longer than it's parent's height which is '400px' as written below. The problem I am getting is, whenever the child's height is longer than the #parents height, the #child's content's overlaps or pass outside the parent's wrap.
<style>
#parent{
position: relative;
height: 400px;
width: 500px;
}
#child{
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="parent">
<div id="child">
//Some content
</div>
</div>
If you want any overflowing content on #child to be hidden, use:
#parent {
overflow: hidden;
}
If you still want to be able to see all the content in #child, you can contain it in a scrollbar. Then the height of #child won't clash with the height of #parent.
#parent {
overflow: auto;
}
Edit:
If you want #parent's height to stretch with #child, #child cannot be absolute positioned. Take that off, and it will work. If you want height to be at least 400px, then you can use:
#parent {
min-height: 400px;
}
See fiddle: http://jsfiddle.net/VYrLh/
Try adding
overflow: auto;
to the #parent style.
An absolute positioned element doesn't follow any of it's parent CSS rules.
Just add following in child selector
#child{
position: absolute;
top: 0px;
right: 0px;
max-height: 400px;
overflow-y: auto;
}
I have an absolute positioned div in a relative positioned div. I want the inner div to overflow on the x-axis, but not on the y-axis.
<html>
<head>
<style>
#wrapper {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
overflow-y: hidden;
overflow-x: visible;
}
#wrapper div {
width: 50px;
height: 50px;
position: absolute;
right: -25px;
bottom: -25px;
background-color: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div></div>
</div>
</body>
</html>
I get cropping or overflow with scrollbars in IE7, IE8, Firefox3, Chrome of the inner div on the x-axis which is not what I want.
I feel I must surely be doing something wrong. Is there a way to accomplish my requirements?
I want the inner div to overflow on
the y-axis, but not on the x-axis.
You are using CSS for opposite, try putting this css in your inner div:
#wrapper div {
............
overflow: auto;
overflow-y: scroll;
overflow-x: hidden;
}
And your parent div:
#wrapper {
............
overflow: auto;
}
What I was trying to do is not possible given html4 + css implementations at the time.
I needed to use an alternative approach.