I am really confused with this. Here I've got a div whose position should be fixed after certain scroll. Before position of that div is absolute. I tried it and found that for one of my screens fixing position is really making document less while on other screen it is not.
What I want to know is which of them is a bug? Does fixing position of element decreases document height?
Thanks
If you use a fixed positioning for an element, it is removed from the "normal layout flow". The height of your document is determined by positioning of all the elements in the page and thus, all changes to positioning affect document height.
Fixed and absolute positioning are explained in detail in the CSS Visual formatting model spec: http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning
Regarding absolute positioning (from the spec):
In the absolute positioning model, a box is explicitly offset with
respect to its containing block. It is removed from the normal flow
entirely (it has no impact on later siblings).
Pretty much the same applies for fixed positioning (Ibid.):
Fixed positioning is a subcategory of absolute positioning. The only
difference is that for a fixed positioned box, the containing block is
established by the viewport.
Related
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.
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).
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/
I am unsure how to position elements using css, as when I use methods like the following, whenever I resize the browser, the elements stay in the same place instead of where I would like them to be on the resized document. Please can you tell me what I am doing wrong?!
.logo {
left: 20px;
top: 20px;
position: absolute;
}
#header h1 {
margin-top: 20px;
margin-left: 500px;
color: rgb(127, 127, 126);
line-height: 0px;
}
Please, have a fiddle - http://jsfiddle.net/hHGRc/
Within the (X)HTML DOM, CSS recognizes four types of positioning. By default, every element in HTML is positioned Statically. This means that it is positioned according to the place that it appears in the normal flow.
Relative Positioning
When an object is positioned relative, it means that it modifies the position based on the origin, which is where it would have been positioned in the normal flow (static). Relative also does something else special, however, and tells the browser that all of its children will be positioned according to this element, whether using relative or absolute.
Absolute Positioning
When an object is positioned absolute, it is placed according to the position of its nearest non-static positioned ancestor. If there is not one, then it uses the <body> to determine its position. This has the potential to break document flow, if its siblings or ancestors are not positioned absolute. If all are positioned absolute from the outer most top node to current node, then it will maintain the flow.
Fixed Positioning
This takes the element out of the flow and positions the object according to the Window object. This means that no matter the scroll state of the document, its size or any other property, it will always appear in that location. (This is how you get objects that scroll with you).
Multiple solutions to your issue
First, as described by others, you may add position:relative to the #header. It will, like explained above, make your header the nearest non-static ancestor and will use it and the basis for determining position. This is probably not ideal for you because you are an admitted novice and this one absolute could easily break enough flow that you may struggle with sibling elements.
As an alternative, you may change the logo from position:absolute to position:relative. This will keep your logo in the flow, but move the logo according to where it appears naturally in your document flow. Chances are that unless you are using floats in your #header, this is probably the one you want, as it a) keeps flow, b) allows for use of child element floats without losing flow, c) achieves your ideal positioning, d) keeps inheritance from parent elements (when it is important).
Another choice is to change the #header to position:absolute. This may alter the way everything interacts, however, unless you change all of your parent and sibling elements to position:absolute. Additionally, you may lose access to ancestor defined widths and heights, as they are only inherited if they are in the same flow. This is the 2nd best situation for you as you can simply add the rule body * { position:absolute; } and all will remain in the flow with you. However, it neglects to really teach you the things you need to learn about positioning and will simply be a crutch.
Hope this helps,
FuzzicalLogic
Defining position: absolute in CSS takes the element in question out of the flow of the document.
Think of this as layers: the bottom most layer is the document (though not always, depending on z-index!), and the top most layer is your element which you have defined as absolutely positioned.
By setting position: absolute, you have told the browser that you will be responsible for positioning the element relative to the top left corner of the document (screen). Above, you have told the browser to position #logo 20px from the left and 20px from the top of the document. When you resize your browser viewport, that element will remain in that position.
I think what you want is to position your element within the document flow, without using absolute positioning. This can be achieved with a combination of floats, margins, and padding.
CSS positioning can be tricky to understand correctly, but once you do, you'll find it very useful.
Try this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Basically, to position anything that needs to be locked to a parent or a container element, the parent or container element itself needs to be positioned as well (absolute, or relative, doesn't matter) this is called positioning context. If an absolutely positioned element cannot find a parent or container that is positioning itself, it will then use the `body as the positioning context.
So in your example, if i were to to guess without seeing your HTML and more of your CSS,
adding position:relative to #header would then allow .logo to position itself absolutely from the top left of the #header element.
Also important to remember that absolute positioning takes the element out of the normal flow of the document.
I'm going with a wild guess and saying that your logo is inside the header division, but your header is positioned staticly. Therefore, your logo is not being positioned according to the header, but according to the document's window. So it will be going to a position that is 20px right and 20px down from the top left corner of the document in all instances.
Try setting position: relative on your #header element. This will keep the header in the same place as it would always appear, and the logo will use the header box to find it's left and top positions rather than the browser window.