hulufei/fixed position relative to parent.md

Last active June 26, 2018 05:37

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/hulufei/9063571.js"></script>
Save hulufei/9063571 to your computer and use it in GitHub Desktop.

Fixed element relative to it's parent

Raw

第一种方法

<div class="container">
  <div class="fixed">content</div>
</div>

.fixed {
  position: fixed;
  left: 50%;
  bottom: 100px;
  margin-left: (containerWidth / 2);
}

<div class="container">
  <!-- 兼容IE和Safari，多加一个div -->
  <div>
    &nbsp;<div class="fixed">content</div>
  </div>
</div>

.container {
  text-align: right;
}
.fixed {
  position: fixed;
  _position: absolute;
  bottom: 100px;
}