The Display Property
Every element on a web page is a rectangular box.The display property determines how that rectangular box behaves. A block element is an element that takes up the fullest width available, with line breaks before and after.
The style rules in the following example display the inline <span> elements as block-level elements:
The HTML:
The CSS:
Result:
The Visibility Property
The visibility property specifies whether an element is visible or hidden. The most common values are visible and hidden.
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but it will still affect the layout:
Here is an example:
The HTML:
The CSS:
Result:
Positioning Element
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
The HTML:
The CSS:
Result:
Floating
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is often used with images, but it is also useful when working with layouts.
The values for the float property are left, right, and none.
Left and right float elements in those directions, respectively. none (the default) ensures that the element will not float.
Below is an example of an image that is floated to the right.
The HTML:
The CSS:
Result
The clear Property
Elements that come after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies the sides of an element where other floating elements are not allowed to be. In the example below, if we set the float property to the div, only the paragraph that comes after the div will be wrapped around the image.
The HTML:
The CSS:
Result:
The overflow Property
As discussed earlier, every element on the page is a box. If the height of the box is not set, the height of that box will grow as large as necessary to accommodate the content.
The HTML:
The CSS:
Result:
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
The CSS:
Result:
CSS - Positioning and Layout
4/
5
Oleh
Unknown
