there is possible to display something befere? when overflow is hidden? or maybe can we specifiy with side will be hidden from overflow?
for ex:
.before {
width: 200px;
margin: 30px;
background-color: blue;
height: 30px;
position: relative;
}
.before:before {
content: "221";
color: blue;
font-size: 15px;
display: inline-block;
position: absolute;
left: -20px;
top: -20px;
}
#ex2 {
overflow: hidden;
}
<div id='ex1' class='before'>Wisible text with css before, more text, more and more... but </div>
<div id='ex2' class='before'>hidden overflow text with css before... more and more text</div>
If you declare an element to have overflow: hidden it will apply to all content, including before and after elements. There is no way to disable the hidden value for a specific child.
Consider wrapping your content in a div with a maximum width and height of its parent, and setting oveflow: hidden on that div instead. The root element's before and after pseudoelements will exist outside the wrapper so won't be affected.
.before {
width: 200px;
margin: 30px;
background-color: blue;
height: 30px;
position: relative;
}
.before:before {
content: "221";
color: blue;
font-size: 15px;
display: inline-block;
position: absolute;
left: -20px;
top: -20px;
}
#ex2 > .wrapper {
overflow: hidden;
max-width: 100%;
max-height: 100%;
}
<div id='ex1' class='before'><div class="wrapper">Visible text with css before, more text, more and more... but </div></div>
<div id='ex2' class='before'><div class="wrapper">Hidden overflow text with css before... more and more text</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>
I am using this layout for responsive div that maintains aspect ratio. It works well, but it requires overflow: hidden, to be clear it's padding-top: 56.25% defined in :after. If there is no overflow on wrapper, next element (in this case href link) is blocked.
My question is: is there a way to achieve same result without overflow: hidden on wrapper? I need some element to be visible outside wrapper without being cutting off.
Open snippet in full page if you can't see the issue within a small window.
#wrapper {
position: relative;
max-width: 1000px;
min-width: 350px;
max-height: 383px;
border: 1px solid;
/*overflow:hidden;*/
}
#wrapper:after {
padding-top: 56.25%;
display: block;
content: '';
background: rgba(0,0,0,.25);
}
<div id="wrapper"></div>
click me
You can add a inner div and make it responsive with a pseudo element like you did before, and apply overflow: hidden; on it. Then add another sibling div and set the style you wish to apply, it would be div #test in the example, as you see it will be visible outside the wrapper.
#wrapper {
position: relative;
max-width: 1000px;
border: 1px solid;
}
#inner {
min-width: 350px;
max-height: 383px;
overflow: hidden;
}
#inner:after {
background: rgba(0,0,0,.25);
padding-top: 56.25%;
display: block;
content: '';
}
#test {
position: absolute;
right: 0;
bottom: 0;
transform: translateY(100%);
width: 100px;
height: 50px;
background: aqua;
}
<div id="wrapper">
<div id="inner"></div>
<div id="test"></div>
</div>
click me
which is the style to apply on a div to make component (button) centered in the botton without knowing the size of the remaining space that will take the div and the size of the button because this style will be generic.
I used this style but it didn't work for me:
<div location="buttonLayout" style="display:flex; justify-content:center; align-items:flex-end ;"></div>
The button is centered but not placed in the bottom of the remainig space of the parent div.
You could use absolute positioning to get button at the bottom middle:
.parent {
background: gold;
position: relative;
width: 300px;
height: 400px;
box-sizing: border-box;
padding-bottom: 48px; // Padding + button height
}
.parent button {
background: grey;
border: none;
height: 32px;
color: #fff;
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
}
<div class="parent">
<button>Button any size</button>
</div>
Just add bottom: 0; to the button.
If you have the following HTML:
<div id="flexItem" location="buttonLayout">
<button id="bottomButton" type="button">Click Me!</button>
</div>
You can use this CSS:
html, body{
height: 100%;
width: 100%;
}
body{
margin: 0;
}
#flexItem{
height: 100%;
width: 100%;
display: flex;
justify-content:center;
align-items:flex-end ;
}
#bottomButton{
bottom: 0;
}
JSFiddle.
Remember not to put inline CSS.
try this
.mybutton {
position: absolute;
bottom: 0px;
margin-left: auto;
margin-right: auto;
}
For this to work the parent container also has to have a position setting other than the default (static), for example position: relative;
I'm in difficulty: I have a parent element that has a size that doesn't know. And I have an item that it must place permanently at the top of the body, then position: fixed, but I cann't because giving it width: 100%, is 100% of the body, but I want 100% of the parent element. How can I do?
Example: http://codepen.io/michele96/pen/jWbYQb
set .fixed's width as width: inherit; don't use 100%
body {
padding: 0;
margin: 0 auto;
}
.container {
position: relative;
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: fixed;
width: inherit; /*change here*/
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
<div class="container">
<div class="fixed">Navbar Fixed</div>
</div>
The problem is that, unlike absolutely positioned elements, the containing block of a fixedly positioned element is usually the viewport, not its nearest positioned element. Then, width: 100% is resolved with respect to the viewport width.
There are ways to change this behavior, e.g. elements with transform establish a containing block for their fixedly positioned descendants. But then your element won't be fixed at the top of the viewport.
Instead, you should use sticky positioning:
.fixed {
position: sticky;
top: 0;
}
body {
padding: 0;
margin: 0 auto;
}
.container {
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: sticky;
top: 0;
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
<div class="container">
<div class="fixed">Navbar Fixed</div>
</div>
Note it's not widely supported yet.
Set transform: translate3d(0, 0, 0); to the parent.
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>