⼦元素使⽤position：fixed，导致他的宽度不能和⽗元素保持⼀
致的解决⽅案
  最近在编码过程中，遇到过这样⼀个问题，代码如下，我们有⼀个⽗级，他有⼀定的宽度，在他的⾥⾯有两个⼦级，其中⼀个是绝对定位的，且要求他们的宽度都和⽗级保持⼀致，然后问题就出现了，我们会发现，有了定位的son他的宽度远远的超出了我们⽗级的宽度，那么问题是怎么引起的呢？
<div class="fathor" >
<div class="son" >
  </div>
  <div class="demo" >
  </div>
</div>
  经过各种百度之后发现，原来给⼦元素加了position:fixed这个属性之后，他就默认相对于window去定
位了，就相当与你将这个元素相对于window加上了position:absolute的属性，所以给他加百分⽐长度的话就是相对于window的百分⽐。那么解决⽅案有哪些呢？我们来⼀⼀尝试。
  1、left：0；right:0；因为fixed也相当于是定位的⼀种，所以我们当然也可以⽤left和right来进⾏定位了，然后将left的值扩⼤，同时将width的百分⽐减少，从⽽使得son和demo的宽度达到⼀致，从⽽起到⼀种视觉上的欺骗效果。（PS：请谨慎使⽤）
<div class="fathor" >
<div class="son" >
</div>
<div class="demo" >
</div>
</div>
  2、calc()；关于calc的具体使⽤将在我后⾯的播客中提出，在这⾥，我们可以将son的width由100%改为calc(100%-324px)，这⾥这个长度不知道是否有规律，还是要⾃⼰，相对来说适应性就不是很好。
<div class="fathor" >
<div class="son" >
</div>
<div class="demo" >
</div>
</div>
  3、absolute改造；因为我们上⾯提到过，本质上说，fixed就是⼀个相对于window的absolute，但是absolute却可⽤relative来指定他相对于谁定位，所以我们在这⾥，可以将fixed绝对定位⽤absolute来进⾏改造。（PS：如果代码改动不⼤的情况下建议使⽤，毕竟更好控制，这种就⼤家⾃⼰操作了哟）
  4、给fathor加fixed属性；我们还可以给fathor加position:fixed；属性，从⽽让⽗元素也相对于window定位，同时，⼦元素也是相对于window的定位，所以他们就都是和window产⽣了联系，从⽽也就在⼀定程度上保持了⼀致。（PS：这种情况适⽤于fathor是最外层元素的情况下，否则的话fathor相对于他原来的⽗级的定位就需要进⾏重新定义了，⽽且很⼤可能会破坏原有样式）
<div class="fathor" >
margin属性值可以为百分比<div class="son" >
</div>
<div class="demo" >
</div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。