I know how to make an element scrollable (inner element absolute and parent relative), but what if I want the whole scrollable element to be positioned as absolute? (to move it around a parent div and overlap something underneath). Am i correct to assume it's not possible? Is there a way to do it via javascript?
I already tried to wrap the relative parent into an absolutely positioned grandparent but obviously it doesn't work :/
Ok I actually solved it by moving the scrollable element into a component (I'm working in React), importing it into the main component, and then I set the position of the component to absolute. However, I'm still interested in knowing if other people have other solutions
Can you just add an overflow on the absolute positioned item?
Something like this?
https://codepen.io/Daggett/pen/abqZgLa
CSS
section {
width: 100v;
height: 100vh;
background-color: blue;
postion: relative
}
article {
width: 20rem;
height: 20rem;
padding: 2rem;
background-color: red;
overflow: scroll;
position: absolute;
top: 2rem;
left: 2rem;
}
div {
width: 100%;
height: 50rem;
background-color: green
}
HTML
<section>
<article>
<div></div>
</article>
</section>
Related
Let's say that I want to have layout that doesn't scroll (meaning width=100, height=100) with one container and
two child elements. Now, when you don't apply any of the positioning context, all the elements follow natural flow of the document which means they stack below each other. How do I achieve positioning along the z-axis (stack them in front of each other) without using absolute positioning?
To be precise, here is fiddle:
https://jsfiddle.net/Rokke/wb10ozme/7/
<div class="wrapper">
<div class="child-01">Child-01</div>
<div class="child-02">Child-02</div>
</div>
html {
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper {
width: 100%;
height: 100%;
background-color: black;
}
.child-01 {
width: 350px;
height: 450px;
background-color: red;
}
.child-02 {
width: 650px;
height: 350px;
background-color: blue;
}
What I want to achieve: child-01 centered horizontally on the page along the bottom edge of the screen, child-02 centered horizontally as well but in front of child-01. I accomplished this by using absolute positioning but then when you open up the developer tools it moves (because of the bottom: 0 property). If I was to use position relative I would have to use negative margin to bring them in front of each other. Does anyone have some idea how this can be achieved in a much better way?
I am trying to do a footer that will stick to the bottom of the page instead I am getting it stuck to bottom position for the original window. When I scroll I end up having the footer stick in the middle of the page.
I am not trying to have it fixed and be sticky to the page.
When I do not have enough content to scroll all is well. (at least it looks that way)
Corresponding HTML:
<footer class="footer_div">
<div class="container">
<p>Sam Sedighian - No rights reseved!</p>
</div>
</footer>
Corresponding CSS:
.footer_div {
background-image: url("../imgs/dark_dotted2.png");
color: #818787;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
padding-top: 10px;
text-align: center;
}
It needs to be at the bottom of the page without being sticky (fixed) and only visible when scrolled to the bottom of the page. So it should work for both these examples: sedighian.github.io/blog/absolute_not_working.html and sedighian.github.io/blog/absolute_not_working2.html
This is an extremely subtle bug. Read the position: absolute documentation carefully:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block.
footer does not have any positioned ancestors. Note that in the Bootstrap example, they explicitly declare position: relative on html.
In addition, you'll want to add a padding-bottom equivalent to the height of your footer so space is reserved for it.
Try:
html {
min-height: 100%;
position: relative;
}
body {
padding-bottom: 40px;
}
I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:
.hero-img-wrap {
position: relative;
margin-top: 35px;
padding-left: 15px;
padding-right: 15px;
}
.hero-img-wrap img {
width: 100%;
height: auto;
}
.hero-img-wrap .trans-overlay {
position: absolute;
bottom: 0;
z-index: 9;
height: 19px;
background-image: url('../images/semi_transparent_white.png');
width: 100%;
}
<div class="hero-img-wrap">
<img src="images/banner_image.jpg" alt="">
<div class="trans-overlay"></div>
</div>
I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.
Since you've defined the height, why not a negative value
position: relative;
top: -19px;
Just a thought, heres a fiddle for ya
http://jsfiddle.net/g11yggap/
Try
Width:inherit;
On overlay div
I have a fixed positioned element somewhere near bottom of my page. As there is more content to it than window height itself displays rest of it's been cut down.
I've tried adding overflow:auto to fix this issue and be capable of scrolling through fixed positioned element but no luck.
I suppose there might be a javascript solution near by but wondering if there is a css one as well.
Hope my question made sense.
Thanks
You have to fix the height/width to get scrollbars, otherwise the fixed element expands out of view. Here's a little demo: little link. Basic outine:
HTML:
<div class = "fixed">
Glee is awesome!<br/>
...
Glee is awesome!<br/>
</div>
CSS:
html, body {
height: 100%;
}
.fixed {
position: fixed;
left: 0px;
top: 0px;
height: 100%;
width: 100px;
overflow: auto;
}
Is there anyway for an absolute positioned child to expand to fill its relative positioned parent? (The height of parent is not fixed)
Here is what i did and it is working fine with Firefox and IE7 but not IE6. :(
<div id="parent">
<div id="child1"></div>
</div>
#parent { position: relative; width: 200px; height:100%; background:red }
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue }
That's easy. The trick is setting top: 0px and bottom: 0px at the same time
Here's the working code
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
display: block;
background-color: #ff0;
border: 1px solid #f00;
position: relative;
width: 200px;
height: 100%;
}
#child1 {
background-color: #f00;
display: block;
border: 1px solid #ff0;
position: absolute;
left: 200px;
top: 0px;
bottom: 0px;
}
Check out a working example here http://jsfiddle.net/Qexhh/
If I remember correctly there is a bug with how IE6 handles div height. It will only create the div to the height needed to contain the content within it when height is set to 100%. I would recommend two approaches:
Don't worry about supporting IE6 as it is a dead browser anyway
If that doesn't work, use something like jQuery to get the height of the parent div and then set the child div to that height.
fake it by setting the backgrounds to be the same colour so no-one notices the difference
You can achieve this with setting both the top and bottom attributes of the child.
See how this is done
At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet!
Dean Edwars' IE7 and 8 JS libraries
As far as I know, there is no way of expanding a parent element around an absolutely positioned child element. By making the child element absolutely positioned your are removing it from the regular flow of page items.
I recently built a 2-column website where the right column was absolutely positioned but the left column was not. If the left column had less content and a smaller height than the right column, the page would cut off the right column since it was absolutely positioned.
In order to resolve this, I had to determine if the height of the right column was greater than the height of the left column and if so set the height of the parent div height to the greater of the two.
Here is my jQuery solution. I'm not much of a coder so feel free to tweak this:
jQuery(function(){
var rightColHeight = jQuery('div.right_column').height();
var leftColHeight = jQuery('div.left_column').height();
if (rightColHeight > leftColHeight){
jQuery('.content_wrap').height(rightColHeight+'px');
}
});