Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
10 views

Module - 2 CSS Part-2

The document discusses different CSS positioning properties: 1) The position property specifies the type of positioning for an element (static, relative, fixed, absolute, or sticky). Elements are then positioned using top, bottom, left, and right properties. 2) Static is the default position and is not affected by top, bottom, left, and right. Relative positioned elements are positioned relative to their normal position. Absolute positioned elements are positioned relative to the nearest positioned ancestor. 3) Fixed positioned elements are positioned relative to the viewport and do not move when scrolled. Sticky positioned elements toggle between relative and fixed positioning depending on the scroll position.

Uploaded by

deepa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Module - 2 CSS Part-2

The document discusses different CSS positioning properties: 1) The position property specifies the type of positioning for an element (static, relative, fixed, absolute, or sticky). Elements are then positioned using top, bottom, left, and right properties. 2) Static is the default position and is not affected by top, bottom, left, and right. Relative positioned elements are positioned relative to their normal position. Absolute positioned elements are positioned relative to the nearest positioned ancestor. 3) Fixed positioned elements are positioned relative to the viewport and do not move when scrolled. Sticky positioned elements toggle between relative and fixed positioning depending on the scroll position.

Uploaded by

deepa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

CSS part-2

CSS Layout
The position property specifies the type of positioning method used for an
element (static, relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an
element.
There are five different position values:
• static
• relative
• fixed
• absolute
• sticky
Elements are then 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 position value.
Positioning
• position: defines the positioning of the element in the page
content flow
• The value is one of:
• static (default)
• relative – relative position according to where the element
would appear with static position
• absolute – position according to the innermost positioned
parent element
• fixed – same as absolute, but ignores page scrolling
3
position: static

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left,
and right properties.

An element with position: static; is not positioned in any special way; it


is always positioned according to the normal flow of the page:
This <div> element has position: static;
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
position: relative
An element with position: relative; is positioned relative to its normal
position.
Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal
position. Other content will not be adjusted to fit into any gap left by
the element.
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 50px;
}
</style>
</head>
<body>
<h1>The position Property</h1>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left: -30px;" subtracts 30 pixels from the element's original left position.</p>
<p>The style "left: 50px;" adds 50 pixels to the element's original left position.</p>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
</body>
</html>
position: fixed
An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
<html>
<head>
<style>
div {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the
same place even if the page is scrolled:</p>
<div>
This div element has position: fixed;
</div>
</body>
</html>
position: absolute

An element with position: absolute; is positioned relative to the


nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).

However; if an absolute positioned element has no positioned


ancestors, it uses the document body, and moves along with page
scrolling.
<html>
<head>
<style>
h2 {
position: absolute;
left: 100px;
top: 150px;
}
</style>
</head>
<body>

<h1>The position Property</h1>

<h2>This is a heading with an absolute position</h2>

<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed
100px from the left of the page and 150px from the top of the page.</p>

</body>
</html>
<html><head><style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of
positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
<html>
<head>
<style>
#parent1 {
position: static;
border: 1px solid blue;
width: 300px;
height: 100px;
}

#child1 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}

#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child2 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}

#parent3 {
position: absolute;
border: 1px solid blue;
width: 300px;
height: 100px;
top: 750px;
right: 15px;
}

#child3 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent4 {
position: fixed;
border: 1px solid blue;
background-color: rgba(255,200,200,0.5);
width: 300px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
}

#child4 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
</style>
</head>
<body>

<h1>The position property</h1>

<h2>position: static;</h2>
<p>The Parent1 element has position: static, and will remain in the natural flow of the page.
It will NOT act as anchor point for the absolutely positioned Child1 element:</p>
<div id="parent1">Parent1: position: static.
<div id="child1">Child1: position: absolute, right: 15px, top: 70px</div>
</div>
<h2>position: relative;</h2>
<p>The Parent2 element has position: relative, and will remain in the natural flow of the page.
It will also act as anchor point for the absolutely positioned Child2 element:</p>
<div id="parent2">Parent2: position: relative.
<div id="child2">Child2: position: absolute, right: 15px, top: 70px</div>
</div>

<h2>position: absolute;</h2>
<p>The Parent3 element has position: absolute, and will NOT remain in the natural flow of the page.
It will position itself according to the closest positioned ancestor.
It will also act as anchor point for the absolutely positioned Child3 element:</p>
<div id="parent3">Parent3: position: absolute, top: 750px, right: 15px.
<div id="child3">Child3: position: absolute, right: 15px, top: 70px</div>
</div>
<h2>position: fixed;</h2>
<p>The Parent4 element has position: fixed, and will NOT remain in the natural
flow of the page.
It will position itself according to the viewport.
It will also act as anchor point for the absolutely positioned Child4 element:</p>
<div id="parent4">Parent4: position: fixed, bottom: 0, left: 0, right: 0.
<div id="child4">Child4: position: absolute, right: 15px, top: 70px</div>
</div>

</body>
</html>
position: sticky

An element with position: sticky; is positioned based on the user's


scroll position.

A sticky element toggles between relative and fixed, depending on the


scroll position.

You must also specify at least one of top, right, bottom or left for sticky
positioning to work.
<html><head><style>
div.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;}
</style></head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Note: IE/Edge 15 and earlier versions do not support sticky position.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et
eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et
eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div></body></html>
Overlapping Elements

When elements are positioned, 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).
An element can have a positive or negative stack order

This is a heading
Because the image has a z-index of -1, it will be placed behind
the text.
<html>
<head>
<style>
img {
position: absolute;
left: 10px;
top: 10px;
z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src=“fish.jpg" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>
Positioning Text In an Image
Image Text

Add some text to an image in the top left corner:


Top Left
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style></head><body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div></body></html>

You might also like