Use absolute position with width settings in HTML and CSS

Description

The following code shows how to use absolute position with width settings.

Example


<!--   ww  w  . j a va2 s  .c  o  m-->




<html>
<head>

<style type='text/css'>
div {
position: absolute;
width: 200px;
border: 1px solid black;
opacity: 0.7;
background: lightyellow;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div>
<p>
Paragraph text. Paragraph text. Paragraph text.
Paragraph text. Paragraph text. Paragraph text.
</p>
</div>
<div>
Second div text.
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Use absolute position with width settings in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Position

...
Do position absolute layout and set z-index...
Force element to horizontally stretch conte...
Layout absolute to left top, and right bott...
Place element absolute outside Top Right wi...
Put div to right bottom corner with absolut...
Stick element to the left bottom with absol...
Stretch Absolute right offset in HTML and C...
Top Align Absolute block in HTML and CSS
Top-left Absolute positioned element in HTM...
Use absolute positioning to center a box on...
Use absolute position inside relative posit...
Use absolute position with bottom and left ...
Use absolute position with bottom and left ...
Use absolute position with bottom and right...
Use absolute position with top and left set...
Use absolute position with top and left to ...
Use absolute position with top and right se...
Use absolute position with top right bottom...

Use absolute position with width settings i...

Use bottom to align the bottom side of an a...
Top Align Static Block in HTML and CSS
Top offset Static Block in HTML and CSS
Align Center for static block in HTML and C...
Align Left and top for Static Block in HTML...
Align Right for static block in HTML and CS...
Bottom Align Static Block with margin-botto...
Center Static Block in HTML and CSS
Left Align Sized Static Block with margin-r...
Right align Sized Static Block in HTML and ...
Stretch Static Block right alignment in HTM...
Place Sized Relative layout block in HTML a...
Position block to the bottom right of the r...
Use negative value in left for relative pos...
Use position relative with top and left val...
Use relative position with top and left in ...
Use relative position with top and left set...
Use relative position with top and left: va...
Clear after floating element in HTML and CS...
...