Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # 实现父子DIV右边重合
- > relative与absolute的分析:
- >
- > `absolute`是根据具有`absolute`/`relative`属性值的父元素进行定位,若所有父元素均无这两个属性值,那么讲根据窗口定位。**该属性会使得元素脱离文档流。**
- >
- > `relative`是根据自身元素在文档流中原本位置进行定位。**该属性不会使元素脱离文档流。**
- 直接上代码
- ```html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Document</title>
- <style>
- .wrapper {
- position: absolute;
- background: blue;
- width: 500px;
- height: 300px;
- }
- .box {
- position: absolute;
- right: 0;
- background: seagreen;
- width: 200px;
- height: 100px;
- }
- </style>
- </head>
- <body>
- <div class="wrapper">
- <div class="box"></div>
- </div>
- </body>
- </html>
- ```
- 如果将`.box`的`position`改为`relative`可不可以呢?
- 可以,但需要同时将`.box`的`right`改成`-300px`。
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement