I'm trying to setup a frame-like area using div, so all the content and picture in the area won't display beyond the area. However, I've tried using different z-index or display but no luck.
http://jsfiddle.net/06xwge5j/
HTML
<div id="Parent">
<div id="Child">
test content
</div>
</div>
CSS:
#Parent {
width: 50px;
height: 50px;
border-width: 1px;
border-style: solid;
}
#Child {
position: relative;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: black;
z-index: -1;
}
You need to utilize the CSS overflow property on the parent element. Add the following line to the #Parent rules:
overflow: hidden;
This will completely hide child elements that are outside the box. Most likely you want to use auto instead of hidden to show scrollbars only when the content exceeds the box. jsFiddle
Demo
#Parent {
width: 50px;
height: 50px;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
#Child {
position: relative;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: black;
}
<div id="Parent">
<div id="Child">
test content
</div>
</div>
http://jsfiddle.net/06xwge5j/1/
Take a look
overflow: hidden;
it hides all content of an element that go beyond its edges.
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>
I have a series of divs with z-index:20 (this is a must be for visual styling reasons), but inside one of them, I have a datepicker which stands as position:absolute floating above everything. I've assigned z-index: 1000 as a great value in order to achieve this.
I discovered the inner z-index this doesn't work because of the parent container. Is there such a hack to workaround this ?
The parent container must have such z-index in order to be above a sibling div, but the datepicker, which is inside one of the boxes, must be on top of everything, and now it is hiding under the next box.
This is the codepen with an actual example: http://codepen.io/anon/pen/jWZMPw
The problem is that .box creates a stacking context because it's a positioned element with non-auto z-index.
Don't do that. Remove
.box {
z-index: 20;
}
.banner {
padding: 10px;
background: #454545;
position: fixed;
width: 100%;
}
.box {
position: relative;
float: left;
margin-left: 20px;
min-width: 100px;
min-height: 100px;
border: 1px solid #999;
padding: 20px;
background: #45e;
}
.box:first-child {
margin-left: 0;
}
.dtpicker {
background-color: #34ed22;
padding: 20px;
min-width: 100px;
min-height: 100px;
position: absolute;
left: 50px;
z-index: 50;
}
<div class="banner">
Something behind
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
<div class="dtpicker">
Dt picker
</div>
</div>
<div class="box" >
Box
</div>
I recommend reading What No One Told You About Z-Index.
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>
Kind of a weird example, but here goes:
How do I get an absolutely positioned DIV to expand when content is inserted that goes beyond its borders? Here is the code:
<html>
<head>
<style>
* {margin: 0; padding: 0;}
body {white-space: nowrap; text-align: center; color: white; font-size: 2em;}
div#container {position: relative; height: 100px; width: 50px;}
div#a {height: 50px; width: 25px; background-color: red; position: absolute; top: 0; left: 0;}
div#b {height: 50px; width: 25px; background-color: blue; position: absolute; top: 0; right: 0}
div#c {height: 50px; width: 25px; background-color: orange; position: absolute; bottom: 0; left: 0;}
div#d {height: 50px; width: 25px; background-color: purple; position: absolute; bottom: 0; right: 0;}
span#title {position: relative; overflow: visible}
</style>
</head>
<body>
<div id="container">
<div id="a"><span id="title">This is my title</span></div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
</div>
</body>
In the example above, the content in DIV "a" is hidden (due to the width/height restrictions). If we set this to "min-height" and "min-width" the content just sits "behind" the other divs, but doesn't move them. How can I accomplish this?
Note: I'm trying to figure this out, as I need to "reposition" the order in which DIVs are ordered in the HTML (I'm trying to make a child template in Wordpress). Any examples/resources are GREATLY appreciated.
Cheers,
Sapiensgladio
You can use min-height and min-width to define the minimum values for those dimensions, which will be expanded to accommodate new/additional/larger content as necessary.
You can couple with the max-height and max-width attributes, which will allow the elements to move from the minimum, as necessary, to the maximum permitted value for the dimension.
Example CSS:
#content {
position: absolute;
min-height: 5em;
max-height: 15em;
min-width: 5em;
max-width: 15em;
border: 1px solid #f90;
bottom: 0.5em;
right: 0.5em;
overflow: auto;
}
JS Fiddle demo.
The above demo uses jQuery to add extra content to the #content div, but that's just for dynamic demonstration purposes, the jQuery is not, in any way, required for the css to work.