Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

stacking issue with float and position absolute #7828

Closed
paulrouget opened this issue Oct 2, 2015 · 1 comment
Closed

stacking issue with float and position absolute #7828

paulrouget opened this issue Oct 2, 2015 · 1 comment
Labels
A-layout/floats

Comments

@paulrouget
Copy link
Contributor 

<style>
  div {
    width: 100px;
    height: 100px;
  }

  #a {
    position: absolute;
    top: 20px;
    left: 20px;
    background: red;
  }

  #b {
    float: left;
    position: relative;
    background: green;
  }
</style>

<body>
  <div id="a"></div>
  <div id="b"></div>
</body>

screen shot 2015-10-02 at 11 47 10
@paulrouget paulrouget changed the title stacking issue with float stacking issue with float and position absolute Oct 2, 2015
@paulrouget paulrouget mentioned this issue Oct 2, 2015
Closed
92 tasks
@notriddle notriddle mentioned this issue Oct 2, 2015
Merged
@mrobinson
Copy link
Member

This could possibly be another issue with content being promoted to stacking contexts in order to get a layer.

bors-servo pushed a commit that referenced this issue Oct 5, 2015
Auto merge of #7834 - notriddle:float-stacking, r=pcwalton
cb03245 
Create a pseudo-stacking context for positioned floats.

Fixes #7828 

That was surprisingly easy...

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7834)
<!-- Reviewable:end -->
bors-servo pushed a commit that referenced this issue Oct 5, 2015
Auto merge of #7834 - notriddle:float-stacking, r=pcwalton
297184c 
Create a pseudo-stacking context for positioned floats.

Fixes #7828 

That was surprisingly easy...

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7834)
<!-- Reviewable:end -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-layout/floats
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mrobinson @jdm @paulrouget