This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 6 years ago.
How can I display a DIV which is bigger than its ancestor, when the ancestor DIV has style overflow: hidden; position: relative;?
Here is an example:
HTML:
<div class="container">
<div class="content">
__________________________SHOW_ME
</div>
</div>
CSS:
.container {
position: relative;
padding: 10px;
overflow: hidden;
width: 10em;
border: 1px solid;
height: 50px;
}
.content {
position: absolute;
overflow: visible;
border: 5px solid red;
}
Here is this example on JS Fiddle.
I tried styling the content DIV with various combinations of position: absolute, overflow: visible, right: -100px, but it didn't help.
How can I style the content div so that it is entirely visible?
I cannot modify the parent DIV with container class, only the content inside.
if you want the content's position to be tied to the container, you basically can't unless you use javascript to update the position on scroll and set the position of the content to be fixed instead of absolute.
Actually you can't show div inside element using overflow:hidden, But I have solution for you.
You can give your div with overflow:auto, so user can scroll x
Here the example fiddle
.container {
position: relative;
padding: 10px;
overflow: hidden;
width: auto;
border: 1px solid;
height: 50px;
}
.content {
position: absolute;
overflow: auto;
border: 5px solid red;
width: auto;
padding: 10px;
}
<div class="container">
<div class="content">
__________________________SHOW_ME
</div>
</div>
Related
There are lots of card to be showed and I need to show menu when I hover one of the cards.
I use position: absolute; for menu and use position: relative; for the card, but why the scrollbar appeared when I hover on the card ？
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 240px;
width: 200px;
overflow: auto;
border: 1px dashed red;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
position: relative;
}
.menu {
display: none;
height: 400px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
</body>
</html>
The scrollbar has nothing to do with your positioning, it is a result of overflow: auto; on your .box element.
overflow: auto; will show a scrolling bar if a child element overflows its parent container where overflow: auto; is set.
Seeing as the .box parent-element has a fixed size value height: 240px; while its child element .menu has height: 400px;, it will cause a scrollbar to appear because there is an overflow of 160px.
While #Yong is correct with document flow in his answer with the position: absolute; property, seeing as you have fixed height and width on all your elements, position: absolute; doesn't actually do anything in this exact reproducible example.
If I understand your problem correctly, a simple solution to your problem if you want to keep the fixed width and height on your .box element, you can simply disable the scrollbar by applying display: none; to the .box pseudo-element ::-webkit-scrollbar.
(NOTE: As of February 28th, 2022 this is still not supported in Firefox).
Read more about browser support at https://caniuse.com/?search=%3A%3A-webkit-scrollbar
Example with no positioning properties & -::webkit-scrollbar
.box {
height: 240px;
width: 200px;
border: 1px dashed red;
overflow: auto;
}
.box::-webkit-scrollbar{
display: none;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
/*position: relative;*/
}
.menu {
display: none;
height: 400px;
width: 200px;
/*position: absolute;
top: 0;
left: 0;*/
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
</body>
</html>
If you want to remove overflow altogether, you can apply overflow: hidden; to .box.
Keep in mind the fixed height of 400px on the .menu element will not apply as the fixed height of 240px on the .box element will hide the remaining 160px. I hope this solves your problem, but a little more detail would help!
absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. -MDN
.menu is positioned absolute therefore it is positioned relative to .card which is the closes positioned ancestor to it.
relative
The element is positioned according to the normal flow of the
document, ... -MDN
And because .card is positioned relative it would still take space and position according to the normal flow of the document. Therefore, it would still be taken into consideration whether the .box or its parent would overflow or not.
with set position: absolute; for .menu and position: relative; for .card you able to change the position of .menu with top bottom left right properties relative to its first positioned (not static) ancestor element( .card position ).
but in your question, the absolute or relative position is not the cause of the scrollbar appear . The reason is the owerflow property .
the default value for owerflow is visible that create no owerflowing . And you created the scrollbar by setting it auto because the size of menu is larger than card.
.box {
height: 240px;
width: 200px;
/* overflow: auto; */
border: 1px dashed red;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
position: relative;
}
.menu {
display: none;
height: 400px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
What's the best way to achieve this:
I have two elements, both absolutely positioned and I want the child to overlap horizontally, even though its parent has overflow-x: hidden.
FIDDLE
.parent {
position: absolute;
z-index:1;
height: 100%;
min-height: 300px;
overflow-y:auto;
overflow-x:hidden;
width: 200px;
background: #ccc;
}
.child {
position:absolute;
z-index:2;
width: 300px;
height: 100px;
top: 30px;
left: 10px;
padding: 10px;
background: #555;
color: white
}
Add a third div that is a parent of both. Position both items absolutely within the outer parent.
<div class="outer-parent">
<div class="parent">
</div>
<div class="child">
</div>
</div>
I know there are several similar questions answered here, but I can not seem to get this working.
I have two parent divs - one is like a frame with a border and padding, the second is a solid black background, and the third is where a transparent image will actually be placed. I need the two parent divs to expand their height based on the image's height.
I have this working for the div with the black background, but I can't get the parent div with the border to expand it's size:
Here is the fiddle: http://jsfiddle.net/vpdj4kst/
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
position: absolute;
}
<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="image.png" />
</div>
</div>
This is because you have set the image to position: absolute; which will take it out of the flow causing the parent elements to act as if it wasn't there.
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements.
Position (https://developer.mozilla.org/en-US/docs/Web/CSS/position)
Remove position: absolute; from .builder_img and the parent containers will react to its height.
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
}
<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="http://coolspotters.com/files/photos/1036167/adidas-st-girls-straw-hat-profile.png" />
</div>
</div>
Hi
I want to place the div2 top align with the div1's border
So far I have tried this for div 2 but it did not work out well
element.style {
float: right;
position: relative;
vertical-align: top;
}
this did not align the div at top position , what could be the fix to make it top aligned?
I would achieve this using position: absolute; on the child like said before, but instead of adding an additional div to the DOM to simulate use the space , I would use a pseudo-element (more precisely, the ::before pseudo-element).
This is the structure I used for it:
<div class="parent">
<div class="child">
</div>
<h1>Start</h1>
</div>
The div with class parent needs to be position: relative;, and the child needs to be absolute to it and set to be top: 0; like the following lines explain:
.child {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background-color: #000;
}
You will though need to set this element a fixed height and width, otherwise it will not work.
The problem of this approach is that you will have a div that will be over the first 100px of your .parent div.
To solve this we need to create a pseudo-element on the .parent div that will simulate that space and make everything work better:
.parent:before {
display: block;
content: ' ';
width: 100%;
height: 100px;
}
Here's a working fiddle with a sample code, hope this helps you!
http://jsfiddle.net/m54rxwjv/2/
PS: This will only work if you know that the height will always be 100px.
Give position relative to your parent div and position absolute to inner div. Don't forget to set top:0px for inner div and after this your inner div will be always at the top of your parent div.
#div1{position:relative;}
#div2{position:absolute;top:0px;}
As per Vipul's answer, I have create code snipped on jsfiddle for same behaviour:
http://jsfiddle.net/zo6jdp4b/1/
I have put one extra div on the top also so that one do not have any issue in child Div css:
.childDiv{
border: 1px solid blue;
height: 10px;
width: 30px;
position:absolute;
top: 0px;
}
Set your top div inside another div with sticky.
Like:
.div2 {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
It should be placed as your div2 in your div1 element in which you have (for example) overflow-y: scroll on a set height (and bellow content to be vertically scrolled).
.div1{
box-sizing: border-box;
border: 3px solid red;
height: 150px;
width: 30px;
}
.div2{
box-sizing: border-box;
border: 3px solid green;
margin: -3px;
height: 30px;
width: 30px;
}
<div class="div1">
<div class="div2"></div>
</div>
.div1{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
}
.div2{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
top:0;
left:0;
}
div2 always at the top