I am creating a webpage, And I have two divs, A and B for instance.
A's position is fixed and it's on top of the page, but B's position is absolute and is somewhere in the middle of the page. When they Overlap, B comes on top of A, But I want this to be the other way around. I want A to come on top of anything, but I don't know how to do that.
Please note that changing their positioning is not an option.
Thank You in advance. :)
You can use z-index css setting to modifiy non-static positioned element order:
div#A { z-index: 2; }
div#B { z-index: 1; }
A will be displayed over B.
use z-index value to adjust them accordingly to layer.
its a style property: style="z-index:200"....
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
<html>
<div id="divA" style="width:100%; height:50px; z-index:2; position:fixed; background-color: red">
</div>
<div id="divB" style="width:100%; height:50px; z-index:1; position:absolute; top:30px; left:20px; background-color:green ">
</div>
</html>
divA will come on top of divB now(due to z-index property). But make sure to define position property for divs. This wont work if we remove position: fixed for divA.
Give A a larger z-index property than B.
div.a {
z-index:2;
}
div.b {
z-index:1;
}
You can read about what z-indexes do over at the MDN, but in a nutshell, "When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one."
You can use css media queries and change the property values if the overlapping is in fact.
Or use javascript to test if it overlaps. Here's an approach u wrote someday: https://github.com/yckart/jquery.overlaps.js
Use CSS to give Div A a high Z-Index.
#a{
z-index: 100;
}
This will mean that Div A will definitely stay over all/most other elements, the higher the value the more likely it will be above everything else depending on how many other elements are on the page. If you need more precise overlap control for multiple elements, assign specific z-index values to your elements, the higher the value the more on top the element will be. You can also use minus values.
Related
I understand that by setting the parent div to position:relative, if I make the position of the child absolute, than the child's position will be absolute within the parent. If I want to make the grandchild positioned absolutely within child, how would I do that, since child is already set to position:absolute? Sorry if this question is weird, any help appreciated.
HTML:
<div id="parent">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
</div>
CSS:
#parent{
position:relative;
}
#child{
position:absolute;
}
#grandchild{
}
why would you need to put another div inside the child? Just absolute position that one and use z-index to layer them
You can have more than one 'position:absolute;'in nested elements without regard to the positioning of the parent element. Each time you use absolute, you set that divs position relative to the dimensions of its parent element. The parent element can be relative, absolute, or fixed (anything but static) and it should not affect its children nodes.
I mention this just so that you do not mistakenly think that the relative positioning of #parent has any bearing on the absolute positioning of #child, and the #grandchild element can be positioned as absolute OR relative, just keep in mind that you are positioning it to the dimensions of the #child, and in reference to its immediate parent.
The short answer, set #grandchild{position:absolute;} and it will work just fine.
An absolute position element is positioned relative to it's parent element (except if parent has position set to static, but it's not your case), then:
#grandchild{
position: absolute;
}
will set grandchild's position absolute in relative to child - just as you want?
This is easy, if you want to manipulate more. I made you an example of positioning.
Here is jsfiddle example:
http://jsfiddle.net/Be84P/1/
#parent{
position:relative;
height:200px;
background: blue;
}
#child{
position:absolute;
top: 20;
width:20px;
height:100px;
background: red;
}
#grandchild{
position:absolute;
bottom:0;
height: 50px;
background: yellow;
}
I believe it does vary on what type of project your working on, but layering or making a list out of it might help. z-index: in CSS, or an ordered list, in HTML.
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;
<div style="background-color:#303030;height:5.5%;">
<input type="text" style="border:1px solid;
top:50px;
bottom:10px;
height:90%;
left:20px;
width:25%;
" />
Here I have a dark div bar, with an input inside it. Why doesnt the top, bottom, left work as expected?
position:absolute;
display:inline-block;
Please note:
Your div has a height of 5.5%, and inside you place an input field 50px from the top, with a height of 90%(!). That is a huge input field. It makes no sense. Use either relative or exact measurements.
The div is missing a </div>
Don't mix-up mark-up and style (css)
In order for positioning to work, you need to declare what type of positioning to use... position: absolute; position:relative; position: fixed; etc...
You need to have the position of the element declared before you can position it in your page. The position property has 4 or 5 different settings. Inherit, absolute, fixed, static, and relative. Absolute won't work, because it needs a parent element that is positioned. Static is the default, and inherit inherits. Fixed freezes the element to the browser window. When you scroll, it won't move. Relative positions it from where it's supposed to be, so I think that's the one you would want.
Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use percents because you need a specific number of pixels.)
Edit
I also need to prevent the content (or lack of content) from stretching or shrinking both elements. First answer I got was to use padding on the parent, which would work great. I want the parent to be exactly 25% wide, and exactly the same height as the browser client area, without the child being able to push it and get a scroll bar.
/Edit
I tried solving this problem using {top:Npx;left:Npx;bottom:Npx;right:Npx;} but it only works in certain browsers.
I could potentially write some javascript with jquery to fix all elements with every page resize, but I'm not real happy with that solution. (What if I want the top offset by 10px but the bottom only 5px? It gets complicated.)
What I'd like to know is either how to solve this in a cross-browser way, or some list of browsers which allow the easy CSS solution. Maybe someone out there has a trick that makes this easy.
The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.
If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).
You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.
You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.
If you are only concerned with horizontal spacing, then you can make all child block elements within a parent block element "inset" by a certain amount by giving the parent element padding. You can make a single child block element within a parent block element "inset" by giving the element margins. If you use the latter approach, you may need to set a border or slight padding on the parent element to prevent margin collapsing.
If you are concerned with vertical spacing as well, then you need to use positioning. The parent element needs to be positioned; if you don't want to move it anywhere, then use position: relative and don't bother setting top or left; it will remain where it is. Then you use absolute positioning on the child element, and set top, right, bottom and left relative to the edges of the parent element.
For example:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
If you want to avoid content from expanding the width of an element, then you should use the overflow property, for example, overflow: auto.
Simply apply some padding to the parent element, and no width on the child element. Assuming they're both display:block, that should work fine.
Or go the other way around: set the margin of the child-element.
Floatutorial is a great resource for stuff like this.
Try this:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
It should have an Npx space on all sides, stretching to fill the parent element.
EDIT:
Of course, on the parent, you could also use
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}