I'm creating a new blogger template , but unfortunately I'm facing an issue.
simple example for what i am trying to do.
<div class='container'>
<div class='slider'></div>
<div class='posts'></div>
</div>
by default the second div (posts) should have z-index higher than the first one.
see this demo
and see this pic and now see what should be done here
, so what is the problem !.
here is my blog
To have an apparent higher z-index, the element must either be
After the other element or
Have a position:relative; or absolute when the previous element has a relative/absolute position.
.d1{
width: 100%;
height:50px;
background: tomato;
position: relative;
}
.d2{
width:80%;
height:200px;
background: blue;
margin: -30px auto 0 auto;
position: relative; /* Try removing this - it will be 'below' d1 because d1 has position:relative; */
}
<div class='container'>
<div class='d1 slider'></div>
<div class='d2 posts'></div>
</div>
In your case, this means adding position:relative; to .container class.
Related
I am trying to create fixed position div inside relative container. I am using bootstrap css framework. I am trying to create a fixed position cart. So whenever user scroll page it will show cart contents. but now problem is, it ran outside that container div.
This has to work in responsive mode.
Here my try:
.wrapper {
width: 100%
}
.container {
width: 300px;
margin: 0 auto;
height: 500px;
background: #ccc;
}
.element {
background: #f2f2f2;
position: fixed;
width: 50px;
height: 70px;
top: 50px;
right: 0px;
border: 1px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Screenshot:
This is how position: fixed; behaves:
MDN link
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
Hence, to get what you want you have to use something more than fixed positioning:
Probably this:
.wrapper {
width: 100%
}
.container {
width: 300px;
margin: 0 auto;
height: 500px;
background: #ccc;
}
.element {
background: #f2f2f2;
position: fixed;
width: 50px;
height: 70px;
margin-left: 250px;
border: 0px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Make the element's parent container have position: relative
Instead of using top or left use margin-top and/or margin-left
If you only use top that will position the element based on the window, but if you use margin-top that will position based on the parent element. Same goes for left or right
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
}
.child {
position: fixed;
margin-top: 30px;
margin-left: 30px;
}
I found the answer to that :
<div class="container">
<div class="inContainer">
<p> coucou </p>
</div>
<div>
<p> other thing</p>
</div>
</div>
You want that class="inContainer" are in class="Container" in fixed position but if you scroll with the navigator scroll you don't want that the class="inContainer" move outside the class="container"
So you can make something like that
.container{
height: 500px;
width: 500px;
overflow-y:scroll;
}
.inContainer {
position: absolute;
}
So class=inContainer will be always on the top of you're class=Container and move with you're class=container if you scroll with navigator scroll =)
(tested only with chrome)
No it's impossible because fixed property throws the element out of the flow so it doesn't depend to anything on the document and yes it is no more contained in your container : )
Yes, you can do it, just use margin-top property instead of top property.
When you use position: fixed and specify a top and or left position,
you'll find that the element will be fixed relative to the window, and
not to any other element of position: relative.
There is a way around this and that is not to specify top and left
positions but instead to use margin-left and margin-top on the
position: fixed element.
Source: https://www.gravitywell.co.uk/latest/design/posts/css-tip-fixed-positioning-inside-a-relative-container/
The behavior of the positioning is mentioned in the AdityaSaxena's answer https://stackoverflow.com/a/18285591/5746301
For creating a fixed position cart, you can also do it with using the jquery.
If we apply the Left or right value or margin, we may face some issue while responsive.
In the below snippet, I have placed the fixed element at the right of the container.
Even if the width of the container increased the fixed element placed accordingly.
Here is the jsfiddle Demo URL
//Jquery
$(document).ready(function(){
var containerWidth = $(".container").outerWidth();
var elementWidth = $(".element").outerWidth();
var containerOffsetLeft = $(".container").offset().left;
var containerOffsetRight = containerOffsetLeft + containerWidth - elementWidth;
$(".element").css("left", containerOffsetRight);
});
//CSS
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:900px;
background:#ccc;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
top:50px;
border:1px solid #d6d6d6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Hope this may help you.
Thanks
If you are looking to show the cart even when the user scrolls that is fixed then you should use position:fixed for the cart (if .container is your cart), because it should be shown with respect to screen/viewport. Your current code will only show the element which is positioned absolutely inside the container. If you want it to be like that then give :
.container {
position:relative;
}
.element {
position:absolute;
top:50px;
right:0px;
}
<div style="position: fixed;bottom: 0;width: 100%;">
<div class="container" style="position: relative;">
<div style="position: absolute;right: 40px;bottom: 40px;background:#6cb975;border-radius: 50%;width: 40px;text-align: center;height: 50px;color: #fff;line-height: 50px;">
F
</div>
</div>
</div>
You can just add
.element {
left:368px;
}
Fiddle: http://jsfiddle.net/UUgG4/
I'm looking for a way to add a footer to my page which will always show up at the bottom. The problem is, a lot of the content on the page is set via position: absolute;, so at the moment, unless I manually give the footer a margin-top: 900px; value, its simply hidden by one of the absolute positioned content. But on some pages where the content is less than 900px, there is an unnecessary gap at the bottom between the end of the page, and the footer.
How can I resolve this in such a way that there's no gap between the end of content and footer?
In the new jquery, you can just use this:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
from http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
Put everything before the footer in a div with position relative. This div will flex vertically to the content in it and will provide the buffer to keep anything after it right below it. No margin needed.
You also can put indexes.
z-index: 1;
http://www.fiveminuteargument.com/fixed-position-z-index
In your case, put z-index in css for footer at 10 or more.
Let's suppose a <footer>, styled with display: block and height: 250px.
So all you have to do to achieve what you want is add:
position: fixed;
top: 100%;
margin-top: -250px;
That's it. It'll be permanently aligned at the bottom. :)
Sticky footer. No javascript required:
http://www.cssstickyfooter.com/
After doing some fiddling I was reminded that absolute positioning removes the element from the document flow. You cannot depend on an absolute positioned element to affect the other elements because it will not. Because you do not know the height of the content then using margin-top is clearly not option.
So I came up with this: basically do a normal layout with floats then use position relative to move the items where you want them. This way the elements still affect the document flow, however, now you have total control over the position. This is precisely what relative positioning is for: You want total control over the position of an element but you still want they element to affect the layout normally.
<html>
<head>
<style>
body {
text-align:center;
}
#container {
position:relative;
margin:0 auto;
width: 1000px;
text-align:left;
}
#header {
position:relative;
top:0px;
left:0px;
width:1000px;
height: 100px;
border:solid 1px #000;
}
#sidebar {
position:relative;
top:10px;
left:0px;
width:300px;
height: 500px; /* for demo */
float:left;
margin-bottom: 20px;
border:solid 1px #000;
}
#main {
position:relative;
top:10px;
left:310px;
width:690px;
height: 200px; /* for demo */
margin-bottom:20px;
border:solid 1px #000;
}
#footer {
margin:0 auto;
top:20px;
width: 1000px;
text-align:left;
height: 100px;
clear:both;
border:solid 1px #000;
}
</style>
</head>
<body>
<div id="container"> <!-- Holds all the content except the footer -->
<div id="header">Header content here</div>
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content here</div>
</div>
<div id="footer">Footer content here</div>
</body>
</html>
currently I'm creating a layout, which requires a div having background graphics and the top and the bottom. My mark-up which I created works fine in FF and looks like this:
#wrapper {
width: 520px;
padding: 2px;
position: relative;
float: left;
z-index: 4000;
}
#upper_bg {
background:url(images/header_top.png);
position:absolute;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
#row_wrapper {
position:relative;
float: left;
z-index: 3000;
}
#lower_bg {
background:url(images/header_bottom.png);
position:absolute;
bottom:0px;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
<div id="wrapper">
<div id="upper_bg">
<!-- ie fix for displaying empty divs -->
</div>
<div id="row_wrapper">
... content!
</div>
<div id="lower_bg">
<!-- -->
</div>
</div>
In IE (7,8 & 9) however the upper and lower_bg divs are invisible. Anybody knows how to fix this?
solved the problem. Indeed, the shown html in my question didn't reproduce the result. After a bit fiddling, I found out that IE was in quirks mode. I created the html via xslt and forgott to add the xsl:output tag and set it to html. After doing so, IE was fine down to version 7 with the layout.
Add a clear...
<div id="lower_bg">
blabla floating divs
<div style="clear:both"></div>
</div>
I'm trying to find an answer to the following question:
Is an element's z-index style its absolute stack order, or its stack order relative to its parent?
For instance, suppose I have the following code:
<div style="z-index:-100">
<div id="dHello" style="z-index:200">Hello World</div>
</div>
<div id="dDomination" style="z-index:100">I Dominate!</div>
Which one will be in front - #dHello, or #dDomination?
That's just for examples. I've tried this in multiple places and results seem to vary. I'm seeing if anyone knows of an authoritative source for settling:
1) What are the actual standards regarding z-index (on this topic specifically)?
2) How do individual browsers vary in their actual implementation of this?
Thanks!
z-index is relative. See this detailed answer, which I wrote for a similar question.
If none of the other elements have a defined z-index, using
z-index: 1 will be fine.
Model: How is the z-index determined?
z-index
<div id=A> Auto 1
<div id=B> Auto 1.1
<div id=C style="z-index:1"></div> Manual 1
<div id=D></div> Auto 1.1.2
</div>
<div id=E></div> Auto 1.2
</div>
<div id=F></div> Auto 2
First, the direct
child nodes of the body are walked through. Two elements are
encountered: #A and #F. These are assigned a z-index of 1 and 2. This
step is repeated for each (child) element in the document.
Then, the manually set z-index properties are checked. If two
z-index values equal, their position in the document tree are
compared.
Your case:
<div id=X style="z-index:1"> Z-index 1
<div id=Y style="z-index:3"></div> Z-index 3
</div>
<div id=Z style="z-index:2"></div> Z-index 2
You'd expect #Y to
overlap #Z, because a z-index of 3 is clearly higher than 2. Well,
you're wrong: #Y is a child of #X, with a z-index of 1. Two is
higher than one, and thus, #Z will be shown over #X (and #Y).
Here is a plunker to visualize this a little better, or try the snippet below
,
.redbox,
.greenbox,
.bluebox {
height: 100px;
width: 100px;
position: relative;
color: #fff;
padding: 3px;
}
.redbox {
background: red;
z-index: 1;
}
.greenbox {
background: green;
top: 40px;
left: 40px;
z-index: 3;
}
.bluebox {
background: blue;
top: -20px;
left: 20px;
z-index: 2;
}
<div id=X class='redbox'>z: 1
<div id=Y class='greenbox'> z: 3</div>
</div>
<div id=Z class='bluebox'>z: 2</div>
Afaik, z-index doesn't work unless that element is set to position: relative; If that same element had a child with position: relative; and the z-index was set higher, the child would show on top of its parent.
So it has elements of both 'absolute' and 'relative' stack order as you phrased it.
All browsers pretty much handle it the same, I think.
Here is the W3C specification for z-index.
I think the most important line, based on your question is the following:
The order in which the rendering tree is painted onto the canvas is
described in terms of stacking contexts. Stacking contexts can contain
further stacking contexts. A stacking context is atomic from the point
of view of its parent stacking context; boxes in other stacking
contexts may not come between any of its boxes.
This seems to indicate that nothing can be drawn in between the div with z-index: -100 and the div with z-index: 200.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
.x1 {
position:relative;
width:100%;
clear:both;
display:block;
z-index:1000;
}
.x2 {
position:fixed;
width:100%;
height:50px;
background-color:#ff0000;
}
.x3 {
position:relative;
height:250px;
width:600px;
background-color:#888;
}
.x4 {
position:relative;
height:250px;
width:600px;
background-color:#0000ff;
}
.x5 {
position:relative;
height:250px;
width:600px;
background-color:#ff00ff;
}
.x6 {
position:relative;
height:250px;
width:600px;
background-color:#0000ff;
}
</style>
</head>
<body>
<div class='x1'>this class is relative
<div class='x2'>this class is fixed</div>
</div>
<div class='x3'>x3: this class is relative</div>
<div class='x4'>x4: this class is relative</div>
<div class='x5'>x5: this class is relative</div>
<div class='x6'>x6: this class is relative</div>
<div class='x3'>x3: this class is relative</div>
</body>
</html>
I've found a lot of variations to this question within SO, but it seems no matter what I try I can't get this (seemingly very simple!) thing working!
What I'm trying to do is to keep the 'centered' div in the center of the viewport and to place the 'sidebar' div directly to its right (i.e. not right-aligned to the viewport) without affecting the centering of the 'centered' div.
Here's some test code on jsfiddle:
http://jsfiddle.net/6wCyr/13/
Everything I've read seems to imply that the float property is exactly what I'm looking for, but the results in the link show that I get weird results wherein the right sidebar is placed below the 'centered' div rather than beside it. That's what's shown in the link.
I've also seen a solution involving using a negative value for the right property, and setting the width of the sidebar exactly, but I couldn't get that one going either.
Hopefully this question is as easy to solve as I think it should be! Just can't seem to find the right set of div inside div and so forth. Hard to debug these alignment issues!
Thanks!
Live Demo
I moved div.sidebar inside div.centered.
I added position: relative to div.centered.
We're using this technique.
You don't have to declare a fixed width on div.sidebar.
CSS:
div.centered {
margin-left: auto;
margin-right: auto;
border: dashed;
width: 100px;
height: 100px;
position: relative
}
div.sidebar {
border: dotted;
position: absolute;
top: 0;
left: 100%
}
HTML:
<div class="holder">
<div class="centered">
CENTERED
<div class="sidebar">
RIGHT SIDEBAR
</div>
</div>
</div>
Try this.
http://jsfiddle.net/DOSBeats/6wCyr/16/
.holder {
margin:0 auto;
width:100px;
}
.centered {
border: dashed;
float:left;
height: 100px;
}
.sidebar {
border: dotted;
float:left;
margin-right:-100px;
width:100px;
}
If you do not set a width to your holder and center it, the sidebar will float to the edge of the window.
Try this:
HTML:
<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>
CSS:
#holder{
margin:auto;
width:500px;
}
#sidebar{
border:dotted;
float:left;
width:100px;
}
#centered{
border:dashed;
margin-left:110px;
width:380px;
}