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;
}

Source : https://css-tricks.com/all-about-floats

There are some mare properties floats contain-

inline-startThe 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-endThe 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 and right are defined, the position of the element is over specified. When this is the case, the left value has precedence when the container is left-to-right (thus, the computed value of right is set to -left); the right value has precedence when the container is right-to-left (thus, the computed value of left is set to -right).

Clearing the floats :- The clear property specifies on which side of an element floating elements are not allow to float.

Source : https://css-tricks.com/all-about-floats

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.

source : https://internetingishard.com/html-and-css

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.

Source : blog.fourthbit.com

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.

source : https://internetingishard.com/html-and-css

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

Source : blog.fourthbit.com

The Absolutely Positioned Elements Ignore the float Property

If 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 becomes none. 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.

Absolute Positioning and Inline Elements - Positioning - Courses - HTML Academy

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 to absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing block.
• When position is set to relative, the left property specifies the distance the element's left edge is moved to the right from its normal position.
• When position is set to sticky, the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixedwhen it is outside.
• When position is set to static, the left 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 to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block.
• When position is set to relative, the right property specifies the distance the element's right edge is moved to the left from its normal position.
• When position is set to sticky, the right property behaves like its position is relative when the element is inside the view port, and like its position is fixedwhen it is outside.
• When position is set to static, the right 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)