Scribd
Upload
5 views

Display, Position, Text

Uploaded by

SakethBharadwaj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Display, Position, Text

Uploaded by

SakethBharadwaj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Display,position,text

UI@2PM Page 1
UI@2PM Page 2
Position : It defines the positioning of the
elements, we may use top, bottom, left and right
properties to support the element positioning

1. static : This is a type of position which do not


get affected by the top, bottom, left or right
position

Note : static is default


2. relative : This is relative to the top,right,bottom
or left properties i.e., the positioning is based
on any of the four above properties

UI@2PM Page 3
3. absolute : This positioning is related with the
parent element

UI@2PM Page 4
4. fixed : This position will be fixed to viewport
and will get affected by the scroll i.e., the
element get scrolled.
<style>
#fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body style="padding-bottom:2000px">
UI@2PM Page 5
<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 id="fixed">
This div element has position: fixed;
</div>

5. sticky : This will not get scrolled up or down.


<style>
.sticky {
position: -webkit-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>

<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>
UI@2PM Page 6
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>

Overflow : This property will enable the scroll


overflow: scroll
div{
overflow: scroll;

Overflow-x:scroll;

UI@2PM Page 7
Overflow-y:scroll;

Text Properties
1. text- color: Using color property

2. text-alignment

UI@2PM Page 8
The above is used for designing the last line only
text-decoration :

UI@2PM Page 9
Text-Transformation

UI@2PM Page 10
Text-Shadow :

UI@2PM Page 11
UI@2PM Page 12

You might also like