格式与布局

首页 > 代码库 > 格式与布局

2024-08-18 10:43:37 216人阅读

一、定位

定位有相对定位、绝对定位和固定位置，详细写下各个定位属性：

绝对定位是相对于浏览器边框或父级；相对定位是相对于原来位置移动；固定位置相对于浏览器边界，用例子来看：

定位position属性：绝对定位absolute(对于top、bottom、right、left属性，只有设置了position才能用前面的那四个属性)

(1)样式表absolute的属性设置代码：

<head>
<style type="text/css">
 *{ margin:0px auto; padding:0px;}
#a3{
	width:300px;
        height:300px;
	background-color:#000;
	position:absolute;
     }
#a4{
	width:200px;
        height:200px;
	background-color:#F00;
	position:absolute;
     }
</style>
</head>
    
<body>
      <div id="a3"></div>
      <div id="a4"></div>
</body>

样式表的绝对定位的效果：技术分享

(2)定位position属性：固定位置fixed

样式表fixed的属性设置代码：

<head>
 <style type="text/css">
 *{ margin:0px auto; padding:0px;}
#a4{
	width:200px;
	height:200px;
	background-color:#F00;
	position:fixed;
			
    }
    </style>
    </head>
    
    <body>
<div id="a4"></div>
 <div id="a3">
 	<img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
    <img src="http://www.mamicode.com/图片/MTXX_20160817174806.jpg"/>
</div>
 
    </body>

样式效果图：技术分享红色的方框设置了固定位置属性值，它不随滚动条的滚动上去，页面怎么滚动它也是不动的。

(3)

定位position属性：固定位置relative

样式表relative的属性设置代码：

<head>
 <style type="text/css">
 *{ margin:0px auto; padding:0px;}
#a4{
	width:200px;
	height:200px;
	background-color:#F00;
	(A)position:fixed;

        (B)position:fixed;
            top:10px;
			
    }
    </style>
    </head>
    
    <body>
<div id="a4"></div>
    </body>

样式效果图:A. 技术分享 B.