将相对div固定在屏幕顶部

冷淡的

我需要将#outer1其固定在屏幕顶部,但是如果不弄乱当前位置就无法做到。我不能只#outer1固定它,因为我需要它是相对的,因为内部的div需要绝对定位。我应该怎么做才能#outer1将其固定在屏幕顶部?

div {
  border: 1px solid black;
}
#outer1 {
  height: 100px;
  position: relative;
}
#outer2 {
  height: 900px;
}
#left {
  display: inline-block;
}
#right {
  display: inline-block;
  position: absolute;
  right: 0;
}
<div id='outer1'>
  <div id='left'>Left</div>
  <div id='right'>Right</div>
</div>

<div id='outer2'></div>

迈克尔·本杰明

我不能只#outer固定它,因为我需要它是相对的,因为内部的div需要绝对定位。

仅仅因为绝对定位的孩子最常见的安排涉及相对定位的父母,并不意味着这是唯一的方法。

绝对定位元素的规则是它们的包含块是最接近定位的祖先#outer1位置固定的是定位的祖先,因此符合条件。人们仅用了99%的时间,position: relative因为这对父母的影响很小。

position: fixed绝对定位的孩子用作容纳块没有问题

从MDN:

定位元件是一个元件,其计算的位置属性是relativeabsolutefixedsticky(换句话说,不是static

相对定位元件是一个元件,其计算的位置属性是relative

一个绝对定位的元素是一种元素,其计算的位置属性是absolutefixed

粘粘定位元件是一个元件,其计算的位置属性是sticky

toprightbottom,和left属性指定定位元素的位置。

绝对定位的元素相对于最近定位的祖先(非静态)定位如果不存在已定位的祖先,则使用初始容器。

来源:https : //developer.mozilla.org/en-US/docs/Web/CSS/position

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Div,固定在底部,固定在顶部

来自分类Dev

css相对位置并滚动时固定在顶部

来自分类Dev

如何正确使导航栏保持固定在屏幕顶部?

来自分类Dev

如何正确使导航栏保持固定在屏幕顶部?

来自分类Dev

jQuery位置DIV固定在滚动条的顶部

来自分类Dev

jQuery位置DIV固定在滚动条的顶部

来自分类Dev

如何使用JavaScript或jQuery使左右div固定在滚动顶部?

来自分类Dev

导航栏固定在顶部

来自分类Dev

当屏幕尺寸不同时,如何使页面元素清除固定在顶部的流体图像?

来自分类Dev

使元素固定在屏幕底部

来自分类Dev

使用固定在屏幕两侧的固定div开发HTML网站

来自分类Dev

滚动带有标题的div,但当标题消失时将其固定在20px顶部

来自分类Dev

滚动95个像素后显示固定在页面顶部的Div

来自分类Dev

如何附加固定在生成的contentEditables div顶部和底部的nonEditableContent?

来自分类Dev

滚动带有标题的div,但当标题消失时将其固定在20px顶部

来自分类Dev

将位置div固定在父级顶部,以使其在调整大小时不会移动

来自分类Dev

使“手风琴/可折叠”中的DIV固定在页面顶部和底部

来自分类Dev

两个位置固定在顶部

来自分类Dev

如何使导航栏固定在顶部

来自分类Dev

如何使终端光标固定在顶部?

来自分类Dev

滚动后固定在顶部的导航

来自分类Dev

当屏幕尺寸变化时,如何将按钮位置固定在div的内部?

来自分类Dev

绝对定位的 div 不滚动;当其他内容滚动时固定在屏幕上

来自分类Dev

GADBannerView固定在UITableViewController屏幕底部

来自分类Dev

将可调整大小的手柄添加到div的顶部,位置固定在底部

来自分类Dev

需要帮助将顶部栏固定在另一个带有滚动条的div中

来自分类Dev

如何将元素固定在相对放置的容器中?

来自分类Dev

固定包装中的相对div

来自分类Dev

可见部分时将标题固定在顶部

Related 相关文章

  1. 1

    Div,固定在底部,固定在顶部

  2. 2

    css相对位置并滚动时固定在顶部

  3. 3

    如何正确使导航栏保持固定在屏幕顶部?

  4. 4

    如何正确使导航栏保持固定在屏幕顶部?

  5. 5

    jQuery位置DIV固定在滚动条的顶部

  6. 6

    jQuery位置DIV固定在滚动条的顶部

  7. 7

    如何使用JavaScript或jQuery使左右div固定在滚动顶部?

  8. 8

    导航栏固定在顶部

  9. 9

    当屏幕尺寸不同时,如何使页面元素清除固定在顶部的流体图像?

  10. 10

    使元素固定在屏幕底部

  11. 11

    使用固定在屏幕两侧的固定div开发HTML网站

  12. 12

    滚动带有标题的div,但当标题消失时将其固定在20px顶部

  13. 13

    滚动95个像素后显示固定在页面顶部的Div

  14. 14

    如何附加固定在生成的contentEditables div顶部和底部的nonEditableContent?

  15. 15

    滚动带有标题的div,但当标题消失时将其固定在20px顶部

  16. 16

    将位置div固定在父级顶部,以使其在调整大小时不会移动

  17. 17

    使“手风琴/可折叠”中的DIV固定在页面顶部和底部

  18. 18

    两个位置固定在顶部

  19. 19

    如何使导航栏固定在顶部

  20. 20

    如何使终端光标固定在顶部?

  21. 21

    滚动后固定在顶部的导航

  22. 22

    当屏幕尺寸变化时,如何将按钮位置固定在div的内部?

  23. 23

    绝对定位的 div 不滚动;当其他内容滚动时固定在屏幕上

  24. 24

    GADBannerView固定在UITableViewController屏幕底部

  25. 25

    将可调整大小的手柄添加到div的顶部,位置固定在底部

  26. 26

    需要帮助将顶部栏固定在另一个带有滚动条的div中

  27. 27

    如何将元素固定在相对放置的容器中?

  28. 28

    固定包装中的相对div

  29. 29

    可见部分时将标题固定在顶部

热门标签

归档