我如何绝对定位div并将其保持在其原始顶部位置,并在其上方浮动dom元素?

Tj泰特

我只是想要一个绝对定位在其当前偏移量顶部位置的div,但是我意识到,如果DOM中位于其上方的任何元素被浮动(即使该元素位于未浮动的元素之内),它都将捕捉到相对父级的顶部。一旦我删除了上面的浮标,absolutley定位的div就会捕捉到顶部。任何帮助是极大的赞赏。这是一个小提琴http://jsfiddle.net/hPA3M/2/

这是我的HTML:

   <div class="parent">
        <div class="child1">
            <div class="baby1">
                <p>Baby</p>
            </div>
            <div class="baby1">
                <p>Baby</p>
            </div>
            <div class="baby1">
                <p>Baby</p>
            </div>
        </div>
        <div class="child2">
        </div>
    </div>

这是我的CSS:

    .parent {
        position:relative;
        height:800px;
        width:400px;
        background:#ff0000;
        padding:20px;
    }

    .child1 {
        width:100%;
        background-color:#00ff00;
        margin-bottom:10px;
    }

    .baby1 {
        background:#e1e1e1;
        /*
        toggling float on and off has very different effects
        */
        float:left;
        width:30%;
    }

    .child2 {
        position:absolute;
        width:100%;
        height:100px;
        background-color:#0000ff;
    }
奥列格

overflow: hidden.child1选择器添加

    .child1 {
        width:100%;
        background-color:#00ff00;
        margin-bottom:10px;

    }

演示版

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将具有绝对位置的元素保持在其容器内的左中

来自分类Dev

如何将图像定位到div的左上角,并在div移动时将其保持在该位置?

来自分类Dev

将锚文本放置在其绝对定位的伪元素上方

来自分类Dev

滚动时如何在相对位置的div内使其div保持在其容器内

来自分类Dev

如何在MS Word中将光标保持在其位置?

来自分类Dev

如何使滚动条保持在固定位置div的内部,并且顶部像素向下推?

来自分类Dev

如何添加元素,但又将其保持在原始位置?

来自分类Dev

CSS转换将浮动元素隐藏在其上方

来自分类Dev

将div定位在其父项下方。位置:绝对;底部:0 不工作吗?

来自分类Dev

将DIV保持在其父DIV的底部中心

来自分类Dev

如何使我的帖子内容保持在其引导范围内或限制行长?

来自分类Dev

当我将鼠标悬停在其上方更改大小的元素上时,如何防止div移动

来自分类Dev

如何使剪辑路径父项内的固定位置元素保持在所有元素之上?

来自分类Dev

浮动元素被绝对位置div裁剪

来自分类Dev

浮动在绝对定位的div内,放置在相对定位的元素内

来自分类Dev

如何在不受位置影响的情况下将页脚保持在底部:绝对元素

来自分类Dev

绝对位置元素的左侧和顶部位置未设置

来自分类Dev

如何保持我的位置:固定的导航栏不会出现在其他元素下方?

来自分类Dev

<div>在其容器的顶部

来自分类Dev

如何使浮动广告正确显示?侧边栏div保持在左侧,内容保持在右侧浮动

来自分类Dev

VueJS 如何定位当前组件并在其中创建元素?

来自分类Dev

从中心缩放后将元素保持在原始位置

来自分类Dev

保持div绝对且在其父级中

来自分类Dev

删除归因并将其放置在其他位置

来自分类Dev

将表单保持在其他应用程序窗口的顶部

来自分类Dev

调整窗口大小(移动视图)时,如何使该div居中以将其保持在堆叠位置

来自分类Dev

如果点击并在其中开始,请保持专注于元素

来自分类Dev

在加载时将div保持在屏幕底部,但在向下滚动时保持在原始位置

来自分类Dev

使用easyljs / canvas / javascript在其中心位置旋转图像,同时图像保持在起始位置

Related 相关文章

  1. 1

    将具有绝对位置的元素保持在其容器内的左中

  2. 2

    如何将图像定位到div的左上角,并在div移动时将其保持在该位置?

  3. 3

    将锚文本放置在其绝对定位的伪元素上方

  4. 4

    滚动时如何在相对位置的div内使其div保持在其容器内

  5. 5

    如何在MS Word中将光标保持在其位置?

  6. 6

    如何使滚动条保持在固定位置div的内部,并且顶部像素向下推?

  7. 7

    如何添加元素,但又将其保持在原始位置?

  8. 8

    CSS转换将浮动元素隐藏在其上方

  9. 9

    将div定位在其父项下方。位置:绝对;底部:0 不工作吗?

  10. 10

    将DIV保持在其父DIV的底部中心

  11. 11

    如何使我的帖子内容保持在其引导范围内或限制行长?

  12. 12

    当我将鼠标悬停在其上方更改大小的元素上时,如何防止div移动

  13. 13

    如何使剪辑路径父项内的固定位置元素保持在所有元素之上?

  14. 14

    浮动元素被绝对位置div裁剪

  15. 15

    浮动在绝对定位的div内,放置在相对定位的元素内

  16. 16

    如何在不受位置影响的情况下将页脚保持在底部:绝对元素

  17. 17

    绝对位置元素的左侧和顶部位置未设置

  18. 18

    如何保持我的位置:固定的导航栏不会出现在其他元素下方?

  19. 19

    <div>在其容器的顶部

  20. 20

    如何使浮动广告正确显示?侧边栏div保持在左侧,内容保持在右侧浮动

  21. 21

    VueJS 如何定位当前组件并在其中创建元素?

  22. 22

    从中心缩放后将元素保持在原始位置

  23. 23

    保持div绝对且在其父级中

  24. 24

    删除归因并将其放置在其他位置

  25. 25

    将表单保持在其他应用程序窗口的顶部

  26. 26

    调整窗口大小(移动视图)时,如何使该div居中以将其保持在堆叠位置

  27. 27

    如果点击并在其中开始,请保持专注于元素

  28. 28

    在加载时将div保持在屏幕底部,但在向下滚动时保持在原始位置

  29. 29

    使用easyljs / canvas / javascript在其中心位置旋转图像,同时图像保持在起始位置

热门标签

归档