时间戳

首页 > 解决方案 > 固定元素行为不如预期

css - 固定元素行为不如预期

问题描述

我有一个固定元素“定位”的情况 - 在某种程度上 - 相对于父容器而不是浏览器窗口......

.container {
  position: relative;
  width: 640px;
  margin: 0 auto;
}

.options {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.options button {
  float: left;
  box-sizing: border-box;
  width: 25%;
}
<div class="container">
  <div class="options">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
</div>

包含按钮的 div 是固定的，底部偏移设置为 0。但是 div 偏移了一定距离，并且从与父容器相同的水平距离开始。现在，一旦我将左偏移值设置为“0”，元素就会按预期定位自身，从视口的边缘开始。所以我知道这实际上并不是相对于父容器定位的。但为什么最初会有一个偏移量？我猜默认的“自动”设置会将左值计算为零以外的值。但是这个值是如何计算的呢？

此外，当值是 100% 与继承时，如何计算宽度值会产生另一个混淆点。我抬头发现两者之间的区别在于，虽然 'width: 100%' 将宽度设置为父元素计算值的 100%，但 'width:inherit' 从字面上占用了父元素的 CSS 值并且将其应用于元素。因此，在我上面分享的示例中，虽然前者会将包含按钮的 div 的宽度设置为其自身父级计算宽度的 100%，但后者会将宽度设置为“640px”，这是父级的CSS 值。我遇到的问题是，在第一种情况下，宽度以百分比设置，元素比预期的要宽。计算的宽度似乎是根据视口宽度计算的，即视口的 100%，

如果'width:inherit'从父元素获取640px的宽度，那么为什么宽度设置为100%时继承自视口的宽度，而不是父元素的计算值。为什么在一种情况下，前面的容器被认为是继承值的父级，而在另一种情况下，视口是计算值的父级？

标签： csscss-position

解决方案

  1. body默认情况下有一个填充。您可以添加padding: 0以使您的固定元素尽可能向左移动，或添加left: 0到您的固定.options元素。

  2. 您不应该使用固定宽度（640 像素），因为您应该在编码时考虑到响应性。

  3. 你不应该在布局中使用浮动，因为它会弄乱对象的盒子大小。如果您希望文本在图像周围“浮动”，请仅在图像上使用它。

html, body {  /* ADDED */
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%; /* CHANGED */
  margin: 0 auto;

  /* ADDED */
  min-width: 640px;
}

.options {
  position: fixed;
  bottom: 0;
  width: 100%;
  /*left: 0;  if you don't want to change the padding for the body */

  /* ADDED */
  display: flex;
}

.options button {
  /*float: left;*/
  box-sizing: border-box;
  /* width: 25%; */
  
   /* ADDED */
  flex: 1 1 auto;  /* grow / shrink / auto-adjust in width */
}
<div class="container">
  <div class="options">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
  </div>
</div>

推荐阅读