Top offset Static Block in HTML and CSS

Description

The following code shows how to top offset Static Block.

Example


<!-- ww  w  .j  av  a  2 s . com-->






<html>
<head>


<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 300px;
width: 700px;
border: 2px solid black;
background: red;
}

* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
background: purple;
}

* .innerClass {
padding: 5px;
border: 5px solid black;
width: 120px;
text-align: center;
position: relative;
}

* .innerClass span {
left: 0;
width: 130px;
height: auto;
}

#myStyle {
height: auto;
margin-top: -70px;
margin-bottom: 0;
position: static;
background-color: yellow;
background-color: gold;
}

</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="myStyle" class="innerClass"><span>this is a test. this is a test. </span></div>
</div>
</div>
</body>
</html>

==
Place div elements to four corners

<html>
<head>
<title>positioning</title>
<style type='text/css'>
body {
background: lightyellow;
font: 12px sans-serif;
}
div {
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
opacity: 0.7;
}
div#one {
background: pink;
position: absolute;
top: 0;
left: 0;
}
div#two {
background: lightblue;
position: absolute;
top: 0;
right: 0;
}
div#three {
background: yellowgreen;
position: absolute;
bottom: 0;
left: 0;
}
div#four {
background: orange;
position: absolute;
bottom: 0;
right: 0;
}
</style>


</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
sit amet sem quis orci malesuada facilisis. Nulla dictum malesuada
magna. Quisque ac est et nibh porta nonummy. Cras pede tortor,
lacinia et, eleifend quis, consequat vel, odio. Proin urna mi,
facilisis et, consequat eu, scelerisque vel, lacus. Nunc turpis.
Vestibulum sed felis.
</p>
<div id='one'></div>
<div id='two'></div>
<div id='three'></div>
<div id='four'></div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Home »
  HTML CSS Tutorial »
    Layout »
      Position

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...
Clear right for above float right element i...
Compare clear both with not clear elements ...
Make a new line br to clear right in HTML a...
...