I need an inner div to scroll up when it is absolutely positioned at the bottom of a div that cannot contain it completely.
here is the code:
css:
#messages {
float: left;
width: 75%;
height: 90%;
position: relative;
overflow-y:scroll;
}
#messages_inner {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
html:
<div id="messages">
<div id="messages_inner">
<div class="message">
whatever
</div>
<div class="message">
whatever
</div>
...
</div>
</div>
here is a fiddle of the problem:
http://jsfiddle.net/pwneth/xkSN2/
working fiddle
add height: 100%; to the div/element you want to scroll
#messages_inner {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height:100%;
}
EDIT: after looking at your comments on other answers, I think the reason you can't do this is because of the position absolute div. Firstly, positioned absolute divs should be inside a relative positioned ones. Changed the layout a bit, I think that was the problem
new working fiddle here
try this code
#messages_inner {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 100%;/* add this*/
}
Like this? >>> AbsolutePositioned Div
If not please explain
#messages {
float: left;
width: 75%;
height: 90%;
position: relative;
overflow-y:scroll;
}
#messages_inner {
position: absolute;
top:0;
}
Related
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
I've seen that pattern for centering an element on a website in the code of someone else:
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<img src="https://placebear.com/200/300" alt="picture-one" />
It works fine. No doubt !
But I can not imagine what the CSS-code actually does.
I've seen similar code in which positioning was used to extend an child element to the size of it's parent.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
But here it makes no sense to me.
Can someone explain me how these first shown technique work?
What the single properties do and how it finally accomplishes it's result?
I would appreciate it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
It's because the image has its default width and height.
When you use
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Element would get the window size and position the element inside of it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
position: relative;
}
<div id="wrap">
<div id="child"></div>
</div>
So, if you put position relative to #wrap, the position absolute #child will adjust to the parent.
Hope it helps! Cheers!
position: absolute allows you to set the distance of you element from the top, bottom, right and left from the edges of the whole page.
In the second example you have shown even thought the #wrap is set to a height of 800px the #child distance from each side of the page is set to be 0. So therefore it covers the whole page!
Hope this helped!
#inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: #000; border:1px solid #fff;
}
#container {
width: 100%;
height: 800px;
}
<div id="container">
<div id="inner"></div>
</div>
I've understood that z-index needs that the div is positioned.
Then, I don't know why it doesn't work in my case :
html {
height: 100%;
}
body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#signDiv {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
}
#infoDiv {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
}
<body>
<div id="signDiv">
...
</div>
<div id="infoDiv">
...
</div>
</body>
The two divs are not superposed, a solution ?
Thank you very much
You're sort of right that declaring a position on an element will make its z-index property kick in. But in your example, because of the order of your elements in the HTML, infoDiv will already be on top by default in terms of z-index. You don't even need z-index.
What you need is to set their positions to absolute instead of relative.
Something like that: http://codepen.io/memoblue/pen/xOBBxK
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
#signDiv {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
#infoDiv {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
<body>
<div id="signDiv">
...1
</div>
<div id="infoDiv">
...2
</div>
</body>
Im having a problem of getting a relative div to stack below an absolute div.
There is a video that scales its height based on the width of the browser, I then had to get a div to position itself directly below it, using an absolute position I was able to achieve this with .contain
I then however need to make it so that I can place other divs below that .contain. With the fiddle I am trying to get the green bar positioned relative (.para1) below the positioned absolute (.contain). I could use a negative margin to fix the issue quickly, but then when placing more divs below .para1 I would have to have the same margin below each of them.
Here is the fiddle for a full illustration: http://jsfiddle.net/L232uhpr/
The code in question:
HTML:
<div class="contain">
<div class="divider">
<div class="txt_wrap">
<p class="center_h1">WHAT I DO</p>
</div>
</div>
</div>
<div class="para1">
<div class="para_wind" data-parallax="scroll" data-image-src="images/bg1.png">
</div>
</div>
CSS:
/*divider*/
.contain .divider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 10px;
z-index: -1;
}
.divider{
width: 100%;
height: 100px;
background-color: #ccc;
}
.txt_wrap{
width: 160px;
margin-left: 45%;
}
/*Parallax 1 Styling*/
.para1{
width: 100%;
height: 100px;
position: relative;
background: green;
}
You can add there padding bottom in CSS so remove it:
.contain .divider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* padding-bottom: 10px; */
/* z-index: -1; */
}
I think It's having padding-bottom:10px by removing it you will get your desired output
.contain .divider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* padding-bottom: 10px; */
z-index: -1;
}
Please check http://jsfiddle.net/L232uhpr/2/
A similar question has been asked many times (how to place text over an image) but every solution says make a relative positioned container and place image and text inside.
But what if the container needs to be absolute??
I want the image to be absolute in order to span the full width of the page, without being limited by the wrapper's width: Wrapper has set width, the image container should ignore this and be full screen, and the text should float above the image.
Here is a fiddle in which the image isn't ignoring the wrapper's width
.splash_image {
position: relative;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
position: absolute;
}
.splash_title {
color: red;
position: absolute;
}
.wrapper {
width: 50%;
}
<div class="wrapper">
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image">
<div class="splash_title">Test title to go here on image</div>
</div>
</div>
You set relative positioning on the image container, so even though you've positioned the image absolutely, it's being positioned absolutely within a relative positioned container. The container should be positioned absolutely if I am understanding what you're looking for:
.splash_image{
position:absolute;
left:0;
top:2%;
height:600px;
width:100%;
overflow: hidden;
z-index: 1;
}
.splash_image img{
width:100%;
}
.splash_title{
color:red;
z-index: 88;
position:absolute;
top:0;
left:0;
}
Updated Fiddle
There are multiple ways to accomplish this. Here is a simple answer:
.splash_image {
position: absolute;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
}
.splash_title {
color: red;
position: absolute;
z-index: 2;
}
.wrapper {
width: 50%;
}
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" />
</div>
<div class="wrapper">
<div class="splash_title">Test title to go here on image</div>
</div>
https://jsfiddle.net/jonnysynthetic/2vqgab7t/
However, you could also try setting the image as a background to the parent element as well. I wasn't sure of the scope of what this is in or a part of, so I wanted to give you the simple answer first.
.splash_image{
left: 0;
top: 2%;
overflow: hidden;
width: 100%;
z-index: 1;
height: 100%;
}
.splash_image img{
width:100%;
position:absolute;
}
.splash_title{
color: red;
z-index: 88;
position: absolute;
top: 50%;
left: 50px;
right: 0;
bottom: 0;
margin: auto;
}
.wrapper{
width: 50%;
height: 150px;
position: relative;
}
https://jsfiddle.net/2tpbx12x/5/
try this:
.splash_image img{
width:100%;
position:fixed;
}