Positioning HTML elements Using CSS
CSS has positioning property, using this property we can position/locate HTML element whatever location we wish. one way to position our element is the float property but with floats may changes the display of element value. Second way to position an element using Absolute or Relative positioning.
Positioning with floats :-
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. Float has two types of properties one is right float and other one is left float.
Float-left :- The element floats to the left of its container.
img {
float: left;
}
Float Right :- The element floats to the right of its container.
img {
float: right;
}
There are some mare properties floats contain-
inline-start
The element must float on the start side of its containing block. That is the left side with ltr scripts, and the right side with rtl scripts.
inline-end
The element must float on the end side of its containing block. That is the right side with ltr scripts, and the left side with rtl scripts.
When both
left
andright
are defined, the position of the element is over specified. When this is the case, theleft
value has precedence when the container is left-to-right (thus, the computed value ofright
is set to-left
); theright
value has precedence when the container is right-to-left (thus, the computed value ofleft
is set to-right
).
Clearing the floats :- The clear property specifies on which side of an element floating elements are not allow to float.
Clear has four valid values as well. Both is most commonly used, which clears floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively. None is the default, which is typically unnecessary unless removing a clear value from a cascade.
Containing Floats :- Rather than clearing floats option to contain the floats , clear floats and containing floats almost same but containing floats does help to ensure that all of our style rendered properly.
apply containing floats withing the parent or container —
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
clear: both;
*zoom: 1;
}
Problems with the floats :-
Pushdown is the symptom of the element inside the floated item being wider than the float itself. Most browse render images/box the outside the float . IE will expand the float to contain the image, often drastically affecting layout.
Make sure you don’t have any images that do this, use overflow: hidden
to cut off excess.
Double Margin Bugs Another thing to remember when dealing with IE 6 is that if you apply a margin in the same direction as the float, it will double the margin.
Quick fix: set display:inline on the float.
There are some properties which can we use for position the elements
Static Positioning :- This is the default if you do not specify the positioning for an element.
If you have three paragraphs one after the other you probably want them to appear one after the other on the page! The same applies to any other block element. The only reason you would ever set an element to position: static;
is to forcefully remove some positioning that got applied to an element outside of your control.
Relative Positioning :- Relative positioning changes the position of an element relative to where it normally open.So if I have a text box inside a div
I could apply relative positioning on the text box to have it display at specific place relative to where it would normally be placed within the div, we can use two values top and left along with positioning property.
Absolute positioning :- An element with position: absolute at the specified coordinates relative at the specified coordinates relative to your screen top-left corner.
I don’t see a problem with using absolute positioning. One possible downside would be that your style sheet would be a little harder to maintain, because you would have widths and positions specified. If you had to change the width of any of your columns in the future, you would have to update the pixel value in 2 places
here we can also use two values top and left along with positioning property
The Absolutely Positioned Elements Ignore the
float
PropertyIf an element is floated to the left or right and we set its positioning type to absolute or fixed, the value of the
float
property becomesnone
. On the other hand, if we set its positioning type to relative, the element remains floated.See the Pen Overview of the available positioning types
In this example, we define two different elements which are floated to the right. Notice that when the red box becomes an absolutely positioned element, it ignores the value of the
float
property, whereas the relatively positioned green box keeps this value.The Inline Elements which are absolute positioned behave as Block Level elements
An inline element whose position is set to absolute or fixed, obtains the capabilities of the block-level elements.
Fixed Positioning :- A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is.
See this link http://nigelbuckner.com/downloads/handouts/web/pos-explained/index.html for more clearance.
The effect of left
depends on how the element is positioned:
- When
position
is set toabsolute
orfixed
, theleft
property specifies the distance between the element's left edge and the left edge of its containing block. - When
position
is set torelative
, theleft
property specifies the distance the element's left edge is moved to the right from its normal position. - When
position
is set tosticky
, theleft
property behaves like itsposition
isrelative
when the element is inside the viewport, and like itsposition
isfixed
when it is outside. - When
position
is set tostatic
, theleft
property has no effect.float
is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.
The effect of right
depends on how the element is positioned :
- When
position
is set toabsolute
orfixed
, theright
property specifies the distance between the element's right edge and the right edge of its containing block. - When
position
is set torelative
, theright
property specifies the distance the element's right edge is moved to the left from its normal position. - When
position
is set tosticky
, theright
property behaves like itsposition
isrelative
when the element is inside the view port, and like itsposition
isfixed
when it is outside. - When
position
is set tostatic
, theright
property has no effect.
Positioning Elements with Percentage or pixel-
The offset is a percentage of the containing block’s width (for left
or right
) or height (for top
and bottom
). For stickily positioned elements, the offset is a percentage of the flow root’s width (for left
or right
) or height (for top
or bottom
). Negative values are allowed.
In this example, we use pixels and percentages to move the element. Sure enough, when the offsets are declared as pixels, the element is moved to a position that we expect.
On the when we choose percentages as the desired CSS unit for our offsets, the element’s position depends on the dimensions of its parent. Here’s a helpful visualisation showing how the new position is calculated (with percentages.
z-index
The z-index
CSS property specifies the z-order of a positioned element and its descendants.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.
See this link https://codepen.io/ruchikharwar/pen/EeJwJd for more informatiom
Z position can be controlled with the CSS z-index property. Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict.
The z-index
property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers.
- bottom layer (farthest from the observer)
- …
- Layer -3
- Layer -2
- Layer -1
- Layer 0 (default rendering layer)
- Layer 1
- Layer 2
- Layer 3
- …
- top layer (closest to the observer)