I am trying to align a fixed div to the bottom inside another fixed div. I have seen on stackoverflow that we can use an absolute div as a wrapper to position a fixed div
Here levelTwo div is fixed and wrapper levelTemp is absolute to align the fixed child div to the bottom and levelThree is the fixed child div.
The expected output for me should be like this:
but it is like this:
Solution 1:
One way is to specify height of the levelTemp div of 50px but in my case the height of levelThree div can vary.
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: fixed;
right: 0;
}
.levelTemp {
position: absolute;
bottom: 0;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: fixed;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
Using position:fixed
body {
margin: 0;
}
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: fixed;
right: 0;
}
.levelTemp {
position: absolute;
bottom: 0;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: fixed;
top: 100px;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
using position:absolute;
body {
margin: 0;
}
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: absolute;
right: 0;
}
.levelTemp {
position: relative;
height: 100%;
width: 100%;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 0;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
This is what you want?
.levelTemp {
/* bottom: 0; */
/* overflow: hidden; */
bottom: 0;
position: absolute;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
/* position: fixed; */
/* bottom: 0; */
}
Related
I'm trying to create an area that contains all my absolutely positioned items. It works great until its sibling has an overflow attached to it. In the example below, when you start scrolling, the child div scrolls as if it's fixed. If you comment out the overflow: auto in the #app CSS, you'll get the desired behavior, but obviously the layout is incorrect. How can I fix this issue without moving the absolute div into the #app div?
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
If you want to use absolute positioning on .absolute you'll have to nest that code within #app and set it to position: relative;. The absolute positioning is referring to its nearest positioned ancestor, in this case, the body element, hence, why it is staying fixed. So you'll have to set #app to relative and it should work just fine.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
position: relative;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
This should also work for you, see changes I made to HTML and CSS below.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: relative;
top: 0;
left: 0;
}
.child {
top: 0px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
color: black;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">Content 1
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
</div>
I got two absolute elements with the same z-index.
One of them has a fixed-position child which has an higher z-index than the parent.
Why the child only overlaps the parent but not the other absolute element with a lower z-index.
How to achieve that the child overlaps both lower z-index elements?
.lower-element {
background: green;
width: 3em;
height: 3em;
position: absolute;
z-index: 10;
}
.higher-element {
background: blue;
width: 100vw;
height: 100vh;
position: fixed;
opacity: .5;
z-index: 20;
}
.lower-element-1 {
top: 5em;
}
<div class="lower-element">
<div class="higher-element">
</div>
</div>
<div class="lower-element lower-element-1">
</div>
position: fixed and position: absolute only usable with the top, bottom, left or right values.
.lower-element {
background: green;
width: 3em;
height: 3em;
position: absolute;
z-index: 10;
}
.higher-element {
background: blue;
width: 100vw;
height: 100vh;
position: fixed;
opacity: .5;
z-index: 20;
top:5em; /* I added */
}
.lower-element-1 {
top: 5em;
}
<div class="lower-element">
<div class="higher-element">
</div>
</div>
<div class="lower-element lower-element-1">
</div>
By making .higher-element to be siblings with .lower-element, then set .higher-element with z-index: -1
.lower-element {
background: green;
width: 3em;
height: 3em;
position: absolute;
z-index: 10;
}
.higher-element {
background: blue;
width: 100vw;
height: 100vh;
position: fixed;
opacity: .5;
z-index: -1;
}
.lower-element-1 {
top: 5em;
}
<div class="lower-element">
</div>
<div class="higher-element">
</div>
<div class="lower-element lower-element-1">
</div>
Remove all your z-index and add only to .higher-element : z-index: -1;
.lower-element {
background: green;
width: 3em;
height: 3em;
position: absolute;
}
.higher-element {
background: blue;
width: 100vw;
height: 100vh;
position: fixed;
opacity: .5;
z-index: -1;
}
.lower-element-1 {
top: 5em;
}
<div class="lower-element">
<div class="higher-element">
</div>
</div>
<div class="lower-element lower-element-1">
</div>
I can't seem to figure out why my project-img-text-container is falling outside of its parent div project-image-container and project-img-main. I added in project-image-container to combat this issue, but it did nothing and I am drawing a blank. I have both containers set to relative, so not sure why project-img-text-container is falling out when it is set to absolute.
Anyone see why?
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
#project-img-text-container {
top:0;
}
When setting something as position absolute, you need to specify it's position within the document or containing element.
If you are not going to use a defined height, position: relative alone can not hold the element within. Since project-img-text-container position property value is absolute, you need to add top:0 to its block of CSS.
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
top: 0; /* This has to be 0 to bring it up to the top */
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
Try adding
img{
position: absolute;
}
Working fiddle: https://jsfiddle.net/rittamdebnath/hwj28zm3/
I have a div that is 50% the width of the screen and 100% height.
I want to have an image placed at the bottom of the div that will adjust with the width.
To set the position I use position: absolute; but this removed the auto width:
code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
}
.bottomImage {
width: auto !important;
width: 100%;
max-width: 100%;
position: absolute;
bottom: 0;
width: auto;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="events_bottom.png" />
</div>
</div>
Is there any way to have an image positioned absolute and adjust to container width?
Adding position: relative to #aaaaa allows the image width and offsets to be computed with respect to the #aaaaa block's width and position.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
position: relative;
}
.bottomImage {
width: 100%;
position: absolute;
bottom: 0px;
left: 0;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="http://placehold.it/300x50" />
</div>
</div>
You could try this:
.aaaaa {
position: relative;
}
.bottomImage {
position: absolute;
left: 0;
right: 0;
}
https://jsfiddle.net/1oxy7odv/
HTML
<div>
<img />
</div>
CSS
div {
display: block;
position: relative;
width: 500px;
height: 500px;
background: black;
margin: 50px auto;}
img {
display: block;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: red;
height: 25px;}
you could use another positioning for your bottomImage to size with its parent container:
.bottomImage {
position: absolute;
top: 0; //or whatever position from top
left: 0;
right: 0; //important !!! this way its always on the rightest(?) position of the parent)
bottom: 0;
}
You can also try this:
.bottomImage {
width: inherit; /*inherits width from div.aaaaa*/
max-width: 100%;
position:absolute;
bottom:0;
}
Unable to scroll when cursor is over the blue block at the top, any ideas of where I'm going wrong?
JSFiddle Demo
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$(".wrapper").scrollTop(300);
As you have the position to be fixed for the class block it will prevent the scrollbar from working. So change the position for class block.
Removed the wrapper div and add the "body" to the javascript
Update
http://jsfiddle.net/cr8uj/7/
JS
$( "body" ).scrollTop( 300 );
You have used css position: Fixed;, so class block will not move from its position and scrollbar will not work on mousehover event
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
background: #ccc none repeat scroll 0 0;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$( ".wrapper" ).scrollTop( 300 );
here is fiddle
please do not use fixed property on .block class
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}