CSS如何定位工程

来源：互联网发布：淘宝质量好的女包店编辑：程序博客网时间：2024/06/06 12:32

<!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>CSS如何定位工程 | jsfoot脚本特效 演示</title></head><body><div id="iAmFixed">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"> 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">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">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">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><link rel="stylesheet" type="text/css" href="styles.css" /></body></html>

CSS

#iAmFixed{background-color:#F6E4F5;border:1px solid white;bottom:15px;padding:15px;position:fixed;right:95px;width:300px;z-index:10;}#iAmAbsoluteInsideFixed{background-color:#DCF4F9;border:1px solid white;padding:15px;position:absolute;right:-50px;top:-90px;}#iAmAbsolute{background-color:#DCF9E1;border:1px solid white;left:0;padding:15px;position:absolute;top:0;width:150px;}#iAmRelative{background-color:#F8F7C3;border:1px solid white;left:400px;padding:20px;position:relative;width:200px;}#iAmAbsoluteInsideRelative{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;}