CSS如何定位工程

最新推荐文章于 2024-07-14 12:36:02 发布

华.Z

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量270

点赞数

文章标签： css border stylesheet xhtml scroll 脚本

<!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;
}

华.Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS如何定位工程

CSS如何定位工程 | jsfoot脚本特效演示 I am fixed (scroll the page)background-color:#F6E4F5;border:1px solid white;padding:15px;right:95px;width:300px;z-index:10;position:fixed;bottom:15px; I am
复制链接

扫一扫

CSS如何定位工程

CSS

“相关推荐”对你有帮助么？