what I'm trying to do is simple to tell. There is fixed div on my page on bottom. It must be always shown on bottom, so position fixed is used.
In this div there are 2divs, one small must be always on top of this fixed div, another must be scrollable.
The problem is small div, if I give him position fixed, it is position to top of window, not on top of this fixed div, as you can see in this fiddle
If small div is position absolute, it is on top of fixed div, but if it is scrolled, as you can see in this fiddle
HTML
<div class="bottom">
<div class="top"></div>
<div class="content"></div>
</div>
CSS
.bottom
{
padding:20px;
height: 253px;
position: fixed;
bottom:0px;
width:100%;
background-color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
top: 0px;
}
.content
{
height: 1500px;
background: linear-gradient(green, blue);
}
Is is possible to make this work without watching scrolling by jvascript? By pure CSS?
You can use a wrapper <div> for the content and let it scroll - so that the absolutely positioned sibling does not scroll along with it, as follows:
HTML
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
CSS
.contentWrap{
height:100%;
overflow-y:auto;
}
* {
margin: 0;
padding: 0;
}
.bottom {
padding: 20px;
height: 253px;
position: fixed;
bottom: 0px;
width: 100%;
background-color: red;
overflow: hidden;
}
.top {
height: 50px;
width: 100%;
background-color: yellow;
position: absolute;
top: 0px;
}
.contentWrap {
height: 100%;
padding-top: 30px; /* .top height - .bottom padding*/
overflow-y: auto;
}
.content {
height: 1500px;
background: linear-gradient(green, blue);
}
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
JSFiddle Demo
Your approach using fixed -> absolute is absolutely correct since you can position an element absolute but relative to its parent by doing so. The problem is that the absolute .top always appears on top of .bottom - so if .bottom is scrolled, .top will follow.
My solution would be using position:fixed; on .top, but using bottom instead of top:
.top {
....
position:fixed;
bottom:253px; /*note sure how it should look at the end, try it yourself*/
}
Add div with class top inside div with class content and remove top:0 from .top class:
html
<div class="bottom">
<div class="content" >
<div class="top"></div>
</div>
<div>
css
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
}
fiddle
Try this, it basically just puts a frame container around your scrollable div to keep everything in place. JSFiddle
<div class="bottom">
<div class="top"></div>
<div class="scroll-container">
<div class="content" ></div>
</div>
<div>
.scroll-container
{
height: 203px;
overflow-y: scroll;
}
Also, remove overflow-y: scroll; from the .bottom class
If you already dealing with fixed heights & positions, why not just position the 'top' section as fixed as well? check the Fiddle Demo
like so:
.top
{
height:50px;
bottom:243px;
width:100%;
background-color: yellow;
position: fixed;
}
Related
First of all an example:
https://jsfiddle.net/85uqehz5/
The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to overflow: visible the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With overflow:auto; the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.
Example Code:
$('#menu').click(function() {
$('#menu-list').toggleClass('hidden');
});
#wrap {
width: 80%;
height: auto;
overflow: visible;
box-shadow: 0 0 .2rem rgba(0, 0, 0, .4);
}
#content {
width: 200px;
height: 20px;
margin: 0 auto;
}
#content2 {
float: left;
}
.hidden {
display: none;
}
#menu {
position: relative;
height: 20px;
width: 100px;
background-color: #ccc;
float: left;
}
#menu-list {
position: absolute;
top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div id="content">
Some Content
</div>
<div id="content2">
Some Content
</div>
<div id="menu">
Open Menu
<div id="menu-list" class="hidden">
<div> bla </div>
<div> bla </div>
<div> bla </div>
</div>
</div>
</div>
It's very simple, in your specific case:
1- Remove overflow: auto; from #wrap
2- Add this to your CSS:
#wrap:after {
display: table;
content: "";
clear: both;
}
This makes the height of #wrap's calculation include the floated element.
If you have multiple uses declare a class like clearfix and use it whenever needed.
Demo: https://jsfiddle.net/85uqehz5/1/
Floats must be cleared: https://jsfiddle.net/85uqehz5/3/
<div id="wrap" class="clearfix">
The reason the menu is cut off is because you haven't clear your float: left and that is done with such piece of code to the container
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
We want to find a solution to show just the green box in front of the backdrop (#back). And this without modifying the html.
HTML:
<div id="body" style="z-index:1;position:relative;">
<div id="div1" style="z-index:4;position:relative;">
</div>
<div style="z-index:4;background-color: red; width: 70px;position:relative;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
<div id="back" style="z-index:5;">
</div>
</div>
CSS:
#body {
background-color: blue;
width: 500px;
height: 500px;
position: relative;
}
#div1 {
position:relative;
background-color: white;
width: 100px;
height: 100px;
}
#back {
position: absolute;
top:0;
width: 100%;
height: 100%;
opacity: 0.7;
background-color: black;
}
div {
width: 50px;
height: 50px;
}
There is a fiddle of our problem :
https://jsfiddle.net/ruj23c60/3/
<div style="z-index:4;background-color: red; width: 70px;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
Removing the style position: relative from the parent of #div2 is sufficient already
There are two way as i know.
First:
You need to give z-index:3 to #back. (less than #div2 parent div) then you can make it front of #back
But this way whole div come in front of black(#back) div.
Fiddle
Second:
Make position:adsolute; to #div2 and remove position:relative; from it's parent.
Fiddle
Note: I have comment opacity: 0.7; from #back to understand properly.
I need to position header and footer accordingly to content height.
So the header and footer are adjacent to content, even when the content size change.
I would like to know if a CSS solution exists (even CSS 3), if no a JS solution.
Notes: I cannot change the order of DIV in the HTML.
Below pictures of the desired layout.
In more details:
I need the top side of the content positioned just after the end
bottom side of header.
I need the top side of the footer positioned just after the end
bottom side of content.
If header change height, content should move up/down.
If content change height, footer should move up/down.
Live code: http://jsfiddle.net/wkfcnj6c/
Example is welcome :)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
</script>
<style>
#content-a, #content-b{
position: absolute;
width: 500px;
height: 250px;
}
#content-a {
background-color: red;
}
#content-b {
background-color: yellow;
}
#master {
position: absolute;
left: 60px;
z-index: 100;
}
#header, #footer {
width: 500px;
height: 50px;
}
#header {
background-color: gray;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
<div id="header">header</div>
<div id="footer">footer</div>
</div>
</body>
</html>
with your html structure this isn't possible with pure css, especially with a dynamic height for the header and footer - as they are in a seperate div, it will be impossible for the content divs to know how much space is left to take up. You would need to use js to either move your divs and calculate the heights, but I would do something along the following:
body, html {
height:100%;
position:relative;
margin:0;
padding:0;
}
#master {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#master > div {
display:table;
width:100%;
height:100%;
}
#master > div > div {
display:table-row;
width:100%;
}
and with the help of jquery, reorder your elements:
$('#master').wrapInner('<div/>');
$('#content-b').insertAfter($('#content-a').insertAfter($('#header')));
Example
Example with expanded content and header
Got it I think: http://jsfiddle.net/Preben/80a6q40x/1/
What I did:
Since all is in correct order except the header, we can do this:
Remove ALL position:absolute;
Put margin-top: 50px on the content-a
Put position:ansolute; top:0px; on the #header
You may also edit the #content-a to have min-height: 250px; to adjust to the content in height: http://jsfiddle.net/Preben/80a6q40x/4/
That's it.
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
<div id="header">header</div>
<div id="footer">footer</div>
</div>
CSS:
#content-a, #content-b{
width: 500px;
height: 250px;
}
#content-a {
margin-top:50px;
background-color: red;
}
#content-b {
background-color: yellow;
}
#master {
z-index: 100;
}
#header, #footer {
width: 500px;
height: 50px;
}
#header {
background-color: gray;
position:absolute;
top:0px;
}
#footer {
background-color: blue;
}
At my Page there are tow sections, a header div and the contents div. I want JS or jquery solution to stick the header section at the top, so that when user scrolls the contents section would cross and cover the header section.
html:
<div id="header">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
http://jsfiddle.net/KNh46/
Update: misunderstood, so you want the content to scroll over the header, not under. Then it should be like:
#header {
position: fixed;
height: 100px;
top: 0;
z-index: 100;
}
#content {
position: relative;
margin-top: 100px;
z-index: 101;
}
See an example here: http://jsfiddle.net/aorcsik/v7zav/
If your header is fixed height, say 100px, then:
#header {
position: fixed;
height: 100px;
top: 0;
}
#content {
margin-top: 100px;
}
This way when scrolled to the top, the header won't overlay the content, but when you start to scroll down, it will.
Something like this, if I understand your question:
<div id="content_wrapper" style="position:relative">
<div id="header" style="z-index:1; position:absolute; top:0px">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content" style="z-index:5">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
</div>
I'm using https://github.com/bigspotteddog/ScrollToFixed on my projects with no problems. ScrollToFixed allows you to set when the div will be fixed based on the scroll position.
fiddle with example: jsfiddle.net/ZczEt/167/
you should add css:
*{margin:0;padding:0}
#header{
position:fixed;
width:100%;
height:200px;
background:#ccc;
}
h3{
text-align:center;
}
#content{
background:#f1f1f1;
padding-top:200px;
min-height:500px;
}
jsfiddle
I myself came with another solution :
add another container div to the header and then position that div to fixed, and make the contents to be absolute. but this way you need to specify a min-height or height for the header:
http://jsfiddle.net/pna54/
<div id="header">
<div class="container">
<h3>I'd like to stick here at the background, please! </h3>
</div>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
css:
div{margin:0;padding:0}
h3{
padding:0;margin:0;
padding-top: 100px;
padding-bottom:100px;
text-align:center;
}
#header{
background:#ccc;
min-height:200px;
width:500px;
position:relative;
}
.container{
position:fixed;
width:100%;
max-width:500px;
}
#content{
background:#f1f1f1;
min-height: 500px;
position: absolute;
width:500px;
}
http://jsfiddle.net/pna54/
Parent absolute must be under child absolute
How to solve this problem with css?
Positions must be absolute.
<div class="parent">
<div class="child">child</div>
</div>
<div class="parent">
<div class="child">child</div>
</div>
My code is here
edit this class:
.child {
position: absolute;
right: -280px; /* add this and remove left:0; */
top: 0;
text-align: center;
width: 280px;
height: 300px;
background: #0f0;
display: none;
z-index: 1; /* add this to set child over the second parent */
jsfiddle