目录：

• 1、CSS 子元素宽度变宽时，如何撑开父元素？
• 2、如何使position:fixed;相对于父元素定位？
• 3、请问CSS的固定定位和绝对定位的区别是什么？我认固定定位是以浏览器窗口为参照，绝对定位是以父级元素
• 4、css布局时，为什么fixed定位元素设置width:100%会超出父容器的右侧
• 5、CSS,DIV定位：子DIV的位置可以根据父DIV的位置来调整，那么父DIV的位置要怎么固定呢？显示器变了分辨率也
• 6、ie6绝对定位的子元素不随父元素高度变化而变化

CSS 子元素宽度变宽时，如何撑开父元素？

希望子元素撑开父级元素可以使用以下两种 *** ：

1、父级版元素宽度不固定，父级元素设置为inline-block或者添加float；

2、对父级元素使用min-width，这样只限制了最小的宽度，如果子元素变宽，父级同样会变宽。

3、首先父类元素必须不是相对定位，如果是相对定位宽度就会默认为百分百。所以必须是绝对定位或者fixed。其实设置了这一步，父类的div已经达到要求了。

4、用第三种 *** 有个不足之处就是，如果子类运用了浮动的话，因为浮动会会脱离文档流，所以不能撑开父类，这时候可以给父类元素加一句overflow:hidden这样就可以让浮动元素也撑开父类。

扩展资料：

当子元素全部浮动时如何解决父元素无法撑开的解决办法：

1、父元素添加高度。

此 *** 可以将父元素显示出来。

缺点：但当调整子元素高度的时候，若要实现父元素包含子元素的效果，就也要调整父元素高度。实在很麻烦！所以此 *** 不要用！

2、父元素也添加浮动。

以暴制暴的 *** ！别人浮起来自己也要跟着一起浮。

缺点：虽然可以解决问题，但是后面要添加有不需要浮动的子元素，则影响其显示。

3、给父元素添加overflow：hidden；

缺点：一旦包含非浮动的子元素，则会影响其显示。

4、给父元素添加一个无关的元素，让添加的无关元素去清除浮动 clean：both；

缺点：添加了一个无关元素，代码阅读受影响。

5、通过伪类来实现，在需要清除浮动的父元素里，添加一个清除浮动的伪类。

推荐此 *** ，比较高级，而且没有以上缺点。

如何使position:fixed;相对于父元素定位？

一、解决思路:

👇这是我们希望的效果，但是没法直接实现

我们想让特定子元素相对于父元素"fixed"定位，也就是说，剩余的子元素不定位。那我们可以分开来想，如果添加一个祖先元素assistor，有两个祖先元素，一个用于辅助定位，一个用于包裹不定位的内容，这个问题不就解决了吗。像这样👇

实质上是child相对于assistorabsolute定位，parent内的内容自己负责展示。只要assistor和parent一样大，看起来就像是子元素child相对于父元素parent固定定位了。具体原理是position: absolute;的元素会相对于之一个设置了position: relative;的祖先元素进行定位，我们将assistor设置为position: reletive;，滚动条是在parent中的，这样"fixed"定位和parent内的内容滚动就都实现了。

二、最终代码:

HTML:

div class="0629-b5c6-1e37-6ad9 assistor"

div class="b5c6-1e37-6ad9-f6d2 parent"

div class="1e37-6ad9-f6d2-daa2 child"/div

div class="6ad9-f6d2-daa2-70ee placeholder"/div

/div

/div

CSS:

.assistor {  position: relative; /*关键点*/

display: block;  width: 500px;  height: 300px;  margin: 100px auto 0 auto;  background-color: #ddd;

}.parent {  width: 500px;  height: 300px;  background-color: #888;  overflow: auto; /*关键点*/}.child {  position: absolute; /*关键点*/

width: 120px;  height: 120px;  margin: 100px 50px;  background-color: #333;

}.placeholder {  width: 1000px;  height: 1000px;

}

参考资料

相对于父元素的FIXED定位的实现.ZVIT[引用时间2017-12-27]

请问CSS的固定定位和绝对定位的区别是什么？我认固定定位是以浏览器窗口为参照，绝对定位是以父级元素

绝对定位是脱离文档流的固定定位宽度随父元素，就是从原来的位置是被删除固定定位宽度随父元素了的。固定定位宽度随父元素他的定位基准是最近的被定位的父级元素固定定位宽度随父元素，若没有就一直往上一级直到body。固定定位和绝对定位的差别就是它是以浏览器的窗口或其固定定位宽度随父元素他设备的屏幕为定位基准，所以它会随着页面滚动而移动。至于一个元素，绝对定位是会随着父级的改变而改变。其他的应该没什么了。

css布局时，为什么fixed定位元素设置width:100%会超出父容器的右侧

因为父元素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属性确定，偏移前的位置保留不动。

CSS,DIV定位：子DIV的位置可以根据父DIV的位置来调整，那么父DIV的位置要怎么固定呢？显示器变了分辨率也

不是你说的这样子~~一般最外层的父框架都是自动居中的，分辨率改变，只会改变整体的位置，不会改变子框架的位置。

style

.Main{margin:0px auto;width:1001px;border:1px solid #000;overflow:hidden;}

.Div{width:500px;margin:0px auto;border:1px solid #999;overflow:hidden;}

.div{width:300px;margin:0px;height:200px;border:1px solid red;}

/style

div class="f6d2-daa2-70ee-188a Main"

div class="daa2-70ee-188a-b7c2 DIv"

div class="0521-99d6-d0b2-97a8 div"

/div

/div

/div

从这个你可以看出，你分辨率改变的时候，只有最外层的div才会变动，里面的两个div都是不会变的

ie6绝对定位的子元素不随父元素高度变化而变化

绝对定位肯定会随父容器固定定位宽度随父元素的高度变化而变化的。要想不变的固定定位宽度随父元素，就要用固定定位了。position:fixed