2 设置尺寸（宽 高）
3 left top right bottom 设置其中两项
如 left:0px;top:20px; 固定在靠左0，上20的地方
同样可以 regiht:0px; top:0px: 固定在右上角
也可以 left:50%;magin-left:宽度的一半; 则水平居中<div style="width:100px; height:200px; background:#ccc; position:fixed; left:50%; top:50%; margin:-100px 0 0 -50px;"></div>利用CSS的position属性对元素定位，以下是position 属性规定元素的定位类型。
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。html中让div层固定在屏幕中央右边500像素的位置,这个的话，我就需要用html中的position的绝对定位来做，我们需要提前知道的有div距离中间的距离，上边的距离，右边的距离，这三个是需要知道的，这里我写一段代码：
<html>
<head>
<tltle>diV固定位置</tltle>
<style>
div{
width:300px;
height:300px;
position:absoult;
right:500px; //只是假设的数据，需要实际测量
top:400px;
}
</style>
</head>
<body>
<div>我是测试文字</div>
</body>
</html>
要想div固定在一个位置，可以使用css中的绝对定位来实现 position: absolute。然后可以通过top、left、right、bottom来定位方向。举个定位在顶部的例子：
<style>top{
position: absolute;
top: 0px;
z-index:999;
border:1px red solid;
}
</style>
<body style="height:800px">
<div class="top">DIV固定在顶部</div>
</body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）