DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> div css布局示例(fixed absolute relative及之間關系)
div css布局示例(fixed absolute relative及之間關系)
編輯:WEB前端代碼     
效果在線預覽:
http:///keleyi/phtml/divcss/3.htm

代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div css position 屬性absolute relative fixed static定位樣式表-</title>
<meta name="description" content="div css樣式表position屬性有absolute relative fixed static分別是絕對定位 相對定位 固定定位 靜態定位等4種定位樣式表。" />
<link rel="stylesheet" type="text/css" href="http:///keleyi/phtml/divcss/3/style.css" />
</head>

<body>

<div id="iAmFixed_keleyi_com">
I am fixed (scroll the page)

<pre>background-color:#F6E4F5;
border:1px solid white;
padding:15px;
right:95px;
width:300px;
z-index:10;
<b>position:fixed;
bottom:15px;</b>
</pre>

<div id="iAmAbsoluteInsideFixed_keleyi_com"> I am absolute inside fixed

<pre>background-color:#DCF4F9;
border:1px solid white;
padding:15px;
<b>position:absolute;
right:-50px;
top:-90px;</b></pre>

</div>
</div>

<div id="iAmAbsolute_keleyi_com">I am a lonely absolute

<pre>background-color:#DCF9E1;
border:1px solid white;
padding:15px;
width:150px;
<b>position:absolute;
top:0;
left:0;</b></pre>
</div>

<div id="iAmRelative_keleyi_com">I am relative (resize window)

<pre>background-color:#F8F7C3;
border:1px solid white;
width:200px;
padding:20px;
<b>position:relative;
left:400px;</b></pre>

<div id="iAmAbsoluteInsideRelative_keleyi_com">I am absolute inside relative

<pre>background-color:#F8D9C3;
border:1px solid white;
padding:20px;
<b>position:absolute;
left:-180px;
bottom:-140px;</b></pre>
</div>
</div>

</body>
</html>


CSS代碼:
/* http:// */
*{
/* Page reset */
margin:0;
padding:0;
}

body{
/* Body Styles */
font-size:12px;
color:#666;
background-color:#f8f8f8;
font-family:Arial, Helvetica, sans-serif;
height:3000px
}

#iAmFixed_keleyi_com{
background-color:#F6E4F5;
border:1px solid white;
bottom:15px;
padding:15px;
position:fixed;
right:95px;
width:300px;
z-index:10;
}

#iAmAbsoluteInsideFixed_keleyi_com{
background-color:#DCF4F9;
border:1px solid white;
padding:15px;
position:absolute;
right:-50px;
top:-90px;
}

#iAmAbsolute_keleyi_com{
background-color:#DCF9E1;
border:1px solid white;
left:0;
padding:15px;
position:absolute;
top:0;
width:150px;
}

#iAmRelative_keleyi_com{
background-color:#F8F7C3;
border:1px solid white;
left:400px;
padding:20px;
position:relative;
width:200px;
}

#iAmAbsoluteInsideRelative_keleyi_com{
background-color:#F8D9C3;
border:1px solid white;
bottom:-140px;
left:-180px;
padding:20px;
position:absolute;
}

pre{
background-color:rgba(255, 255, 255, 0.35);
color:#888888;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
margin-top:10px;
padding:10px;
}

pre b{
color:black;
font-weight:normal;
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved