css布局时，为什么fixed定位元素设置width:100%会超出父容器的右侧
css样式如下：
*{
margin:0;
padding:0;
}
body{
height:800px;
background:#f4f4f4;
background:url(images/pattern_129.gif);
}
div{
margin:8px;
}
p{
width:100%;
height:50px;
background:#FFF;
position:fixed;
}
html代码如下：
<body>
<div>
woshiwo
<p>mfkjgiegijgi</p>
</div>
</body>
因为父元素div设置了margin为8，修改为：
div{
margin:0;
}
fixed：表示固定定位，相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，不会随浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
扩展资料：
层模型：
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
绝对定位：
为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
相对定位：
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
你先试试用 top 和left定位试试追问
我这里就是需要用到fixed定位，只是发现了这个问题，不知道原因
追答首先，position:fixed; 是相对窗口定位也就这儿的body(你可以把body看成是P的父级)，
然后你又设置了100%，那么P的宽度就会变成body的宽度。也就是撑满全屏（水平方向）。
所以为了测试，我在这里设置了body无margin/padding，但是p的左侧没有和窗口左侧对齐
追答因为：
div{
margin:8px;
}
所以就有8xp的距离，你改为0试试？
最终，fixed定位的p的宽度是怎么来的呢，脱离了文档流，则设置width:100%时，p应该左右都与浏览器对齐，而现在...
追答p的宽度是默认来的，就是p里面的内容撑出来的。width:100%已经是没用的了！
本回答被提问者采纳css布局时,为什么fixed定位元素设置width:100%会超出父容器的右侧
fixed：表示固定定位，相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，不会随浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attach...
CSS position定位(fixed、sticky)
fixed定位使元素相对于浏览器窗口保持固定位置，通过"left", "top", "right", "bottom"属性来设置元素的具体位置。然而，当应用于工具条fixed_bar，如果需要它在容器滚动时始终保持在顶部，fixed可能会带来问题。fixed_bar可能会超出容器宽度，且需要在scroll事件中动态调整top值，操作较为繁琐。相比之下...
DIV+CSS左中右布局使用float右边总是掉下去了求修正 代码
css 错误，你对宽度相加理解不够全面。三个div的总宽度为100%；页面总宽度100%应该包括边框的宽度，但是你给id为main的div了边框，导致三个div加上边框的宽度超出了页面总宽度的100%。解决办法，去掉id为main的边框或者设置为0，或者修改三个div的宽度，最终使三个div的宽度加上所有的边框宽度的总值为...
求教:css里使用fixed布局为什么图片会跑到
position:fixed 注意了是对浏览器窗口定位，和body没关系，滚动网页不会影响fixed定位
css网页的几种布局实例
第一:使用多个fixed时,注意自己需要基于什么定位,因为如果父级有用transform属性时,可能会导致子元素的fixed基于父元素容器定位,而不是基于body定位。效果如下:在上图中我可以发现中间黑色的小框是基于父级来定位,并且宽度也基于父容器的50%。详细的请看下面代码:<!DOCTYPE html> 关于position的定位的坑 body{ margi...
header的css中加入position:fixed这句,导航栏就错位了怎么回事啊_百度...
这位网友你好，属性position:fixed;是相对body元素设置的，如果你是想让导航栏固定在顶部的话可以用这个属性。导航栏的宽度设置为100%。具体设置方法如下：.header{ position:fixed; left0; top:0; width:100%;}
css中的position:fixed;设置这个之后div框就直接消失了,求解决。
3、在css标签内，设置类名为con的div的样式，使用width属性设置div的宽度为300px，使用height属性设置div的高度为200px，使用background属性设置div的背景颜色为红色，定位属性position设置为相对定位（relative）。4、在css标签内，设置类名为pos的div的样式，使用width属性设置div的宽度为100px，使用height...
css 中position: fixed;
absolute定位的元素会相对于第一个static定位以外的父元素定位，而fixed定位则是相对于浏览器窗口。当需要元素在整个页面中保持固定位置时，fixed是一个非常实用的选择。position属性还允许你通过"inherit"值从父元素继承position属性，这在需要保持元素层级关系时很有用。
CSS fixed 布局嵌套的一些问题
会受到父级 fixed 的影响，除了需要 z-index 来区分层级，还要注意 transform 的使用（貌似好多地方 transform 都会引发问题）一般的场景是一个遮罩加一个弹框 效果是这样的 这个时候在内部的 children 再使用 fixed 布局时，就会被父级的 fixed 元素限制住 1、父级不使用 tansform 2、不进行嵌套 ...
如何使position:fixed;相对于父元素定位?
只要assistor和parent一样大，看起来就像是子元素child相对于父元素parent固定定位了。具体原理是position: absolute;的元素会相对于第一个设置了position: relative;的祖先元素进行定位，我们将assistor设置为position: reletive;，滚动条是在parent中的，这样"fixed"定位和parent内的内容滚动就都实现了。二、...
