Scribd
Upload
21 views

Advanced CSS: Layout: by Syeda Roshni Ahmed

This document discusses advanced CSS layout techniques including normal flow, positioning elements, and floating elements. It explains the different position values like static, relative, absolute, and fixed. It provides code examples of how to use these positioning values to place elements on a page with properties like top, bottom, left, and right. It also covers how to control element overlap using the z-index property and how floating elements allows content to wrap around elements.

Uploaded by

Ravi Shankar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Advanced CSS: Layout: by Syeda Roshni Ahmed

This document discusses advanced CSS layout techniques including normal flow, positioning elements, and floating elements. It explains the different position values like static, relative, absolute, and fixed. It provides code examples of how to use these positioning values to place elements on a page with properties like top, bottom, left, and right. It also covers how to control element overlap using the z-index property and how floating elements allows content to wrap around elements.

Uploaded by

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

Advanced CSS: Layout

BY SYEDA ROSHNI AHMED


Outline

•Normal flow
•Positioning elements
•Floating Elements
Normal Flow

•Positioning refers to the layout of the items


on your page.

•div#navigation {width: 200px;


background: gray; padding: 10px; }
how to position
1. Determine the method of positioning
• position:static;
• position:relative;
• position:absolute;
• position:fixed;
2. Specify the actual numerical values for its exact
coordinates
• left:100px; right:200px; top:50px; bottom:5px;
Normal Flow – no “positioning”
Fixed Position
.box1 {
height: 100px;
width: 100px;
background-color: green;
position: fixed;
top: 50px;
right: 75px;
}
...
<div class="box1"></div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
...
Relative Position
.box1 {
height: 100px;
width: 100px;
background-color: green;
}
.box2 {
height: 100px;
width: 100px;
background-color: blue;
position: relative;
top: 25px;
left: 150px;
}
.box3 {
height: 100px;
width: 100px;
background-color: orange;
}
...
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
Absolute Position
.box1 {
height: 100px;
width: 100px;
background-color: green;
}
.box2 {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 25px;
left: 150px;
}
.box3 {
height: 100px;
width: 100px;
background-color: orange;
}
...
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
Overlapping Elements
.box1 {
height: 100px;
width: 100px;
background-color: green;
}
.box2 {
height: 100px;
width: 100px;
background-color: blue;
position: relative;
top: -25px;
left: 50px;
}
.box3 {
height: 100px;
width: 100px;
background-color: orange;
position: absolute;
top: 125px;
left: 25px;
}
...
Controlling the Overlap(Z-index)
.box1 {
height: 100px;
width: 100px;
background-color: green;
position: relative;
z-index: 3;
}
.box2 {
...
position: relative;
top: -25px;
left: 50px;
z-index: 2;
}
.box3 {
...
position: absolute;
top: 125px;
left: 25px;
z-index: 1;
}
...
Floating Elements

•Floating makes objects line up in one side of


its container element,
•And allowing other elements to flow around
it
•Objects will only float as far as its container
element
• When floating block-elements, always
define a width
Floating elements diagram
Floating Element
Floating Within a Container

You might also like