4.02.03

最新推荐文章于 2022-08-19 21:08:22 发布

转载最新推荐文章于 2022-08-19 21:08:22 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/boss-H/p/10645852.html

本文详细介绍了CSS中的各种定位方式，包括相对定位、绝对定位和固定定位等，并通过实例展示了这些定位方式的具体应用。对于理解网页布局及元素位置控制具有较高的参考价值。

/*fixed定位：相对于浏览器窗口*/
position: fixed;

<html>
<head>
<meta charset="utf-8">
<title>绝对定位、相对定位</title>
<style>
　　#d{
　　　　width: 200px;
　　　　height: 200px;
　　　　background: red;
　　　　}
　　#d1{
　　　　width: 50px;
　　　　height: 50px;
　　　　background: yellow;
　　　　/*相对定位:相对于元素本身应该在的位置移动*/
　　　　position: relative;
　　　　left: 20px;
　　　　bottom: 20px;
　　　　}
　　#d2{
　　　　width: 50px;
　　　　height: 50px;
　　　　background: pink;
　　　　}
　　#dd{
　　　　width: 200px;
　　　　height: 200px;
　　　　background: blue;
　　　　position: relative;
　　　　}
　　#dd1{
　　　　width: 50px;
　　　　height: 50px;
　　　　background: orange;
　　　　left: 20px;
　　　　bottom: 20px;
　　　　/*绝对定位：距离父类（有position样式的父类）...body*/
　　　　position: absolute;
　　　　left: 20px;top: 50px;
　　　　z-index: 100;
　　　　}
　　#dd2{
　　　　width: 50px;
　　　　height: 50px;
　　　　background: grey;
　　　　position: absolute;
　　　　left: 30px;
　　　　top: 60px;
　　　　z-index: 50;
　　　　}
</style>
</head>

<body>
<div id="d">
　　<div id="d1"></div>
　　sadassafasf
　　<div id="d2"></div>
</div>
<div id="dd">
　　<div id="dd1"></div>
　　<div id="dd2"></div>
</div>
</body>
</html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
　　#d{
　　　　width: 200px;
　　　　height: 200px;
　　　　background: red;
　　　　/*fixed定位：相对于浏览器窗口*/
　　　　position: fixed;
　　　　left: 20px;
　　　　top: 50px;
　　　　}
</style>
</head>