Positioning In CSS
The positioning is used to position various elements, text and images on the web page.CSS gives control positioning to the HTML elements.
The position property is used to set position for an element. The element can be positioned by using the values i.e. top, bottom, left and right properties.
Syntax:
Selector {position:value;top:value;left:value:bottom:value;right:value}
Where selector is any html element or image
Where values in positions are fixed, absolute, relative and
values of top, bottom, left, right are in pixels.
There are four types of positioning in CSS
1.Static
Positioning
2.Fixed Positioning
3.Relative Positioning
4.Absolute
Positioning
1. Static Positioning:
This is a by default position for HTML elements. This type positioning is not
affected by the top, bottom, left and right properties.
2. Fixed Positioning:
When you want to fix the element on the browser, this property is useful. The FIXED property forces an element into a fixed position relative to the browser window. The fixed element will not move, even when the page is scrolled.
Let`s see the example :
</style>
<p>This is positioning 2</p>
This property is used to set the element relative to its normal position.
4. Absolute Positioning :
The absolute positioning property sets an element in a specific location and it is
not affected by the flow of the page. This property positions the element at
the specified coordinates relative to your screen top-left corner.
<!DOCTYPE html>
<html>
<head>
<style>
h2{position: absolute; left:100px;top:200px}
</style><body>
In above output the Level 1 headings with class="f"
have a relative position 20 pixels above and 20 pixels to the right of it’s
original position.
All level 2 headings will be positioned 100 pixels from the
left of the browser window and 200 pixels from the top of the browser window.
Float Property:
The float property defines the flow of content.
The float CSS property is written CSS file or in
the style of an element.
Following are the types of floating properties :
1. float : left :
This property helps to float the element on left side of the container
2. float : right :
This property helps to float the element on right side of the container
3. float : none :
This is default property.i.e. this shows the element as it is.
<!DOCTYPE html>
<title>Float Example</title>
</head>
<style>
.float-left{float:left;font-size:25px;background-color:yellow}
.float-right{float:right;font-size:25px;background-color:yellow}
</style>
<h2 class="float-left">Information Technology</h2>
<p>This property helps to float the element on left side of the container</p>
<h2 class="float-right">Information Technology</h2>
<p>This property helps to float the element on right side of the container</p>
</body>
</html>
Display property
This property specifies how the elements are displayed on the webpage. The display property in CSS defines how the components are going to be placed on the web page. This property is used to define the display of different parts of a web page.
Syntax :
display : value;
Where values are :
Inline : To display an element as an inline
element.
Block : It is used to display an element as an block
element. It starts on a new
line, and takes up the whole width of
the browser window.
Block-inline : This value is very similar to inline element
but the difference is that you are able to set the width and height.
None : The element is completely removed.
Example 1
<!DOCTYPE html>
<html>
</head>
<body>
Example 2
<html LANG="EN">
<head>
<title>EXAMPLE of CSS DISPLAY</title>
<style type="text/css">
a{dispaly: block;background-color:orange;}
</style>
</head>
<body>
<p>
<a href="http://www.google.com">Google Website</a>
<br>
</p></body>
</html>
Visit here and learn new trends and technologies everything.
Please Comment and Share. ConversionConversion EmoticonEmoticon