”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.Absolute pattern
Like background pattern, it’s a simple CSS
built in property, position:absolute. using absolute pattern
, you can position a HTML element at a specified position in its ancestor’s area, and the HTML
element will not be in the HTML tag flow(placed one by one).here is the code(I added the border in CSS, so that you can find where each HTML tag is):
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Absolute</title>
<style type="text/css">
.positioned { position : relative; border : 1px solid #000000;}
.absolute {
position : absolute;
top : 10px;
left : 10px;
border : 1px solid #000000;
}
</style>
</head>
<body>
<h1>Absolute</h1>
<div class="positioned">
<span class="absolute">Sized Absolute</span>
</div>
</body>
Note
One thing to mention, in the book, the above code displays like this
but in my firefox
3.6, it looks like this
I think you already find the difference, the <div/> in my firefox looks like just one black line, does not wrap the <span/>, I think that’s because <span/> used Absolute pattern, it’s not a child of <div/> when shown in browser, although it is physically(in code). but from firebug, if you disable <span/>’s ‘position:absolute’, then everything looks like image in the book.
Posts
No comments:
Post a Comment