How to remove padding from div after replacing another div using z-index propriety.
This is basic HTML structure:
a) main container, height:auto
b) div that should be overflowed
c) div that overflows div b)
After moving c) div up for 200px, I get empty space. Main container has auto height propriety, but it remains the same size.
My question is how do you guys remove extra space after moving divs up with position/z-index proprieties
You can use a negative margin instead of positioning div#c. See this demo.
A negative margin doesn't alter the stacking but is able to put the div#c over div#b. Don't forget the phenomenon of the collapsing margins.
In some cases, you can arrive at the same conclustion as far as the painting is concerned (doesn't matter what techinque you take). But the route leads along important css concepts:
By means of top|right|bottom|left an offset is carried out after div#c has taken up room. Therefore, a following element (or in your case: div#a) is arranged in such a way so if it were not first been positioned.
positioning can create a new stacking context (in conjunction with a z-index != auto)
an element that is positioned relative creates a containing block (a frame of reference for descendants that are positioned absolute)
Relative positioning is more or less consciously used as a bugfix for IE.
try this replace top:-30px; with margin-top:-30px;
http://jsfiddle.net/NqphG/1/
Related
What I have - parent div with several (5) child divs. And few child divs contain text, hence they may change their side and move others inside parent div (in certain volume).
But I need that 4th of child div stays at his place all the time (see picture attached).
I tried to define its position using position:relative for parent and position:absolute for needed div (let's call him - "Object"). But in this situation when the height of other child divs, locating higher than Object, changes, one of them may stay on the content of the "Object" (over it).
Moreover, I found that with position:absolute "Object" started to ignore padding of parent div!
As I see - I need to fix somehow the position of Object in relation with top border of parent div. BUT - margin-top for 4th div doesn't work for it, as it moves the child div #3 above.
I am new to CSS and will be glad if anyone may help me.
// doesn't work as needed:
div#father {position: relative;}
div#son5 {position: absolute;}
initial draft code for parent and child divs at Jfiddle https://jsfiddle.net/741rzafq/2/
If you want to keep the element fixed at its position, you can use position:fixed; for that element. It will remain at its position even if you scroll the page.
Having a strange issue which has happened to me before but I couldn't figure out the issue either. I can work around it but I'd prefer to understand why it's happening so that I can fix the root issue.
The position of a element is changing between 1200px and 1999px as you can see here:
1200px:
1999px:
The element is behaving like there is a breakpoint at 1200 but there isn't and the css doesn't change either according to Chrome dev tools.
You can see that the margin and position change slightly but not enough to cause such a shift in position.
I am using Bootstrap in case that matters.
Does anyone have any idea what's causing this?
This is the problem:
margin-top: 1.5%
You have a percentage based margin value, therefore, on resize, the positioning of the H2 will vary.
If you don't want it to vary, change it to another unit, for example px.
Also, you might want to specify offsets properties (left/right, top/bottom) of the element:
absolute
The element is removed from the normal document flow; no space is created
for the element in the page layout. Instead, it is positioned relative
to its closest positioned ancestor if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left. This value
creates a new stacking context when the value of z-index is not auto.
Absolutely positioned boxes can have margins, and they do not collapse
with any other margins. Source MDN
actually I am beginner in web design and I took the concepts of margin and position properties in css.
So, my question is I can change the position of an element using css properties (position, top and left and so on).
But also I realized that by increasing the margins and padding, I can also change the position of an element. But is this way good?
Or just there are different ways to change the position of elements?
Which one is better?
Margin is: how much is the minimal distance from an element to its surrounding element
Position property (the important ones) are static, absolute, fixed, relative
Static means that no changes to current position (default)
Relative means that, from the default position, the element will be positioned 'offset' to its default position
Absolute means that the element will be removed from flow and positioned relative to its non-static parent element
Fixed means that the element will be removed from flow and positioned relative to the browser
here is reference of positioning:
https://www.w3schools.com/cssref/pr_class_position.asp
here is reference of css box model
https://www.w3schools.com/css/css_boxmodel.asp
Your question is actually related to Box-Model which is controlled by Box-Sizing and others properties:
padding
margin
box-sizing
border
Strictly speaking, these properties control the box layout according to the box-model. Since not all part are obvious particularly margin, it may seem as it controls positioning but no.
Margin: To define the spacing out of an element w.r.t. to the element
occupied area.
Padding: To define the spacing inside of an element w.r.t. the content
of that element.
Position: To define the position of an element w.r.t. the space for
content displayed on the screen.
Try it out in W3Schools.com.
I'm using a javascript library to create modal windows in my application.
I'm having a problem where there are 2 divs, A and B (A is parent of B) both position:fixed. Div A has z-index:1 and the Div B z-index:3.
I want another div, C, also with fixed position but external to these two, be in between them (with z-index:2), but it ends up on top of all. Apparently the child div(B) z-index does not matter at all and always stays on bottom of div C..
I made a JSBIN with the sample here:
http://jsbin.com/koyasu/edit?html,css,output
This is just how z-index works. The parent div sets the layer for it and all of its children. Children who set a z-index will only be changing their layer inside that parent.
You'll have to restructure your DOM for this one, I'm afraid.
A fixed position always refers to the viewport, so you might as well take DIV "B" out of "A", getting three fixed elements on the same level. Then z-index can be applied more relieable.
The title is fairly self explanatory. Additional details to consider are...
The element i'm applying the css to will be position:relative
The element will be embedded onto a web page
I'm using left: -9999px to move the element off screen temporarily
The element may or may not move 'over' or 'through' other elements on the page.
Will doing this have any negative effects such as altering the layout/placement of other elements on the page?
Thanks
In most cases, offsetting a relatively-positioned element will not affect the layout of other elements in the same flow, because other elements will only respect the "original" position of the element (i.e. the position if it had not been offset). The offset properties only create a visual effect on the element being offset. From the spec:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap.
However, the spec does point out an edge case (immediately after the above portion):
... However, if relative positioning causes an 'overflow:auto' or 'overflow:scroll' box to have overflow, the UA must allow the user to access this content (at its offset position), which, through the creation of scrollbars, may affect layout.
For example, scrollbars can reduce the width of a container and cause other elements to wrap where they otherwise would not.
No.
From MDN:
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
As you can see in this Demo, the relatively positioned element simply overlaps other elements, without affecting the original layout - the other elements stays as it was previously (other than the fact that currently it's overlapped, obviously).