I am trying position 2 or more images on top of another, so I have been testing the following code
#wrapper div{
width: 100%;
}
#header div{
width: 100%;
clear: both;
}
#content div{
position: relative;
overflow: scroll;
}
#image1
{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
#image2
{ margin-left:3px;
position: absolute;
left: 25%;
top: 150px;
z-index: 3;
}
#footer div{
width: 100%;
float: left;
clear: both;
}
<div id="wrapper">
<div id="header">
<h3>Testing Header</h3>
</div>
<div id="content">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
<div id="footer">
<h3>Testing Foorter</h3>
</div>
</div>
However the header and footer wont show up, I am not sure if I must float something or clear it, I have been testing this on jfiddle and in my own server and nothing, the image tags fill the page, can anyone please show me how to solve this.
Change your CSS rule:
#content div{
position: relative;
overflow: scroll;
}
to:
#content {
position: relative;
overflow: scroll;
height:500px;
}
jsFiddle example
First, #content div isn't being applied to anything since it's looking to select divs within #content which don't exist. By removing the div part of that rule, you apply relative positioning to the content div which allows the absolutely positioned children to be positioned relative to the content container, not the entire page, as what was previously occurring.
Then you can specify a height of the content div as needed.
You can just refer to your header,content and footer as #footer #header #content. There is no need to specify the div tag after them in the css.
Edited JFiddle:
http://jsfiddle.net/50b7qxjs/1/
This is because the z-index in your
#image1{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
Working Demo
Change the z-index value with z-index:-1
Updated fiddle for your requirement.
Related
I have a footer div on my side, which should be at the very bottom, regardless of the content.
When the page loads, the footer looks good, but when another div loads much text, the text slides under the footers, so the footer doesn't dynamically adapt to the page size:
<style>
#div1 {
width: 300px;
margin-top: 300px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
}
</style>
<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>
I know, position: fixed could solve my problem, but I want the footer to be "under" the content, not "over".
Here is the fiddle: https://jsfiddle.net/4fjts5p4/
When you just use absolute, use also these, but I prefer position: fixed. This would be perfect:
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
min-height: 40px;
}
Use a min-height rather than height, which doesn't hardcode the height.
Moreover, you haven't closed the footer's } CSS rule.
Try position relative.
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 40px;
}
If you use absolute it will take the footer outside the flow of the document.
See this fiddle.
You should put the footer and content both inside a div say its id is "wrapper" and its padding bottom should be same as footer height and its position should be relative. And then set the footer position to absolute with bottom 0.
So wrapper div code :
#wrapper
{
position:relative;
min-height:100%; /* in case if content is smaller than window size then footer will remain at bottom because of window this */
padding-bottom:40px;/* same as height of footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
background:#0c0;
height: 40px;
line-height:40px;
}
Working Demo : https://jsfiddle.net/4fjts5p4/4/
You can make it by structuring HTML like the bellowing, consisting wrapper, content and footer.
The key (also one drawback) is to set the height of footer,
A demo:http://codepen.io/anon/pen/XXjOam
HTML:
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
/* For highlighting, you may not need this */
#footer {
background:#ffab62;
border-top:1px solid #ff4b02;
color:#333;
text-shadow:1px 1px 0 rgba(255,255,255,0.6);
}
All you need to do is set position:relative; and height:auto; . This will fix all your issues.
<style>
#div1 {
width: 300px;
margin-top: 300px;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: auto;
}
</style>
<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>
Let's see if I can explain this correctly. I want a header, always visible AND content AND a footer that is hidden behind the content, that becomes visible when scrolled to the footer. Here's what I have so far...
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
background-color:blue;
position:fixed;
bottom:0;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
What this code currently does: Header is hidden behind content and footer is always visible overlapping content.
Here is the current test page... http://next-factor.com/test-layout.php
Much help is greatly appreciated. Thank You!
give a z-index in #top
#top {
background-color: red;
height: 25vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
it will make header visible.
and remove position:fixed from #bottom
#bottom {
background-color: blue;
bottom: 0;
height: 35vh;
width: 100%;
}
hope this will solve your problem
here is the working example http://jsfiddle.net/a3ru9d4d/
in this example I have added padding top in the container so that content inside the container will not hide behind the header.
I think you want something like this:-
*{margin:0;padding:0}
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
z-index: 1;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
position:relative;
z-index:-2;
background-color:#31353a;
}
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
Footer
</div>
</div>
I hope it will helps you.
Take a look at this. I've introduced two new CSS definitions that achieve what I think you want.
https://jsfiddle.net/b8my8h5j/
I added z-index definitions. The higher the index, the higher it is in a non-static positioning stack. the content header has 30, so it appears above 20 for the content, but the footer has 10, so t's always at the back.
I added a margin-bottom to the content so that there's space for you to scroll down and have the footer be completely visible.
Update:
https://jsfiddle.net/b8my8h5j/1/
Also cleared padding/margin on the body and html tags so that the blocks fit together snugly.
Added a margin-top to the content so that the top of the green box is visible.
I think this produces what you want: z-indexes on all three, and making room at the bottom of content for the footer to show completely when you scroll to the end of the page
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height: 25vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
z-index: 3;
}
#content {
height: 120vh;
width: 100%;
background-color: green;
position: relative;
margin-bottom: 33vh;
z-index: 2;
}
#bottom {
height: 35vh;
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
z-index: 1;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
Here's the fiddle: http://jsfiddle.net/gBQqQ/
Here's the html:
<div id='testtexture'>
<div id='testinside'>
<div style='vertical-align: top;' class='test'></div>
</div>
</div>
And the css:
.test {
width: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
min-height: 130px;
height:auto;
padding-bottom:50px;
background:blue;
}
#testtexture {
width: 100%;
position: relative;
top: 10px;
}
#testinside {
z-index: 3;
background:red;
position:relative;
}
I do not see why there is an issue. I expect either there is something obvious that I am missing, or there is an underlying issue which means I cannot make the red div go above the blue div- maybe because it is a child of the blue div?
Generally not the best idea to have a child div you want to appear behind it's parent. Usually you would take the child div outside the parent to do this. Nonetheless it is possible. Add z-index:-1 to the child div and remove position:relative from the parent.
HTML
<div id='testtexture'>
<div id='testinside'>
<div class="test"></div>
</div>
</div>
CSS
.test {
position: relative;
z-index: -1;
width: 50px;
margin: 0 auto;
height: auto;
min-height: 130px;
padding-bottom: 50px;
background: blue; }
#testinside { background: red; }
See fiddle: http://jsfiddle.net/gBQqQ/1/
If you use firebug, you can see div.test is still there in the correct position behind it's parent. As a side note, the styling vertical-align you had on a div won't do anything.
i have an absolute div inside a relative div and i want to make it of a fixed dimension. my problem is that the height is ignored.
this is my html structure:
<div id="wrap">
<div>
<h1>test</h1>
</div>
<div id="swipe">
<br/>
</div>
</div>
and this is my css:
body {
background-color: #7ECEFD;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
margin: auto;
overflow: hidden;
position: relative;
}
#swipe {
background-color: white;
position: absolute;
top:0;
left:10px;
width:100%;
height: 500px;
}
why? how can i resolve it with css? any other trick (jquery)?
http://jsfiddle.net/nkint/XQzJf/
It is 500px high, but most of it is hidden due to the overflow: hidden on #wrap. You need to either remove that or make it big enough to contain #swipe.
html, body, #wrap {
height: 100%;
}
Hi Folks Here is what i got in css:
#loading {
background:#000 url(loading.png) center;
opacity:0.5;
cursor:auto;
min-height:250px;
z-index:15;
}
#main {
padding: 10px;
z-index:1;
}
and in html:
<div id="loading">
<div id="main">Something here</div>
</div>
and i expect the loading.png to cover the div#main but it doesn't and "Something here" stays on the top of loading.png !?
Update: background is in CSS not an image in loading div.
Your HTML is wrong. The div main should be outside the div loading:
<div id="main">
<div id="loading"></div>
Something here
</div>
You also need to position the latter div using CSS so that it does not just push the main content out from underneath it, as well as sizing the div at 100% of its container's width and height:
#main { position: relative; }
#loading {
background: url("loading.png");
opacity: 0.5;
cursor:auto;
width: 100%;
height: 100%;
z-index:15;
/* Positioning */
position: absolute;
left: 0;
top: 0;
}