                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

在第十一行加入“position:fixed;bottom:0 top:0”以后窗口的位置会发生变化呢？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
 width:200px;
 height:200px;
border:2px red solid;
position:fixed;
 bottom:0;
 right:0;


}

</style>
</head>
<body>
<div id="div1"></div>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
</body>
</html>

慕姐3102452

2016-03-09

源自：初识HTML(5)+CSS(3) 13-8

关注问题我要回答

2763

操作

收起

5 回答

清水3201892
2016-05-09

1.position:fixed;bottom:0 top:0 窗口的位置以top为准有right和left以right为准，就顺时针优先。

2.fixed与absolute定位类型类似，absolute作用是将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

fixed相对于屏幕内的窗口

0 回复有任何疑惑可以回复我~

收起回答

爱学习的keki
2016-04-07

同学你好：

这不是相对位置。fixed的作用是固定位置，position:fixed;bottom:0;right:0；代码的意思是：窗口在距窗体大小的底部和右部0px的地方固定位置。所以无论你的窗口放大或者缩小，它会一直存在于你当前窗体的右下角，且不随着其他内容移动。

0 回复有任何疑惑可以回复我~

收起回答

简单的阳光
2016-03-11

fixed的作用是：相对于屏幕内的窗口（不是整个网页），固定不动。那么拉滚动条时，它也不动，也就是不随网页里的文档变化位置！
由于你设置了bottom:0px; right:0px;
这样做的效果是设置了 div元素在窗口中的位置。
两者不冲突，等于说是先说明了这个元素不随网页里的内容变化，然后又设置了该元素的位置。

0 回复有任何疑惑可以回复我~

收起回答