Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Edward_555
Html和javascript零散代码
提交
a9ea35e1
H
Html和javascript零散代码
项目概览
Edward_555
/
Html和javascript零散代码
通知
1
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
Html和javascript零散代码
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
a9ea35e1
编写于
10月 20, 2020
作者:
Edward_555
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
上传新文件
上级
ed3fbeda
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
103 addition
and
0 deletion
+103
-0
index_absolute.html
index_absolute.html
+103
-0
未找到文件。
index_absolute.html
0 → 100644
浏览文件 @
a9ea35e1
<!doctype html>
<html
lang=
"en"
>
<head>
<!-- Required meta tags -->
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, shrink-to-fit=no"
>
<title>
Hello, absolute!
</title>
<style>
body
{
width
:
50%
;
}
.son6
{
position
:
absolute
;
top
:
20px
;
left
:
70px
;
width
:
100%
;
height
:
30px
;
background-color
:
#ff5500
;
}
.son7
{
width
:
100%
;
height
:
30px
;
background-color
:
#ff5555
;
}
/*这个parent虽然设置了absolute,但是没有设置top,left等,所以依然在当前位置,如果添加了top,left,那该parent就会以body进行定位*/
.parent1
{
position
:
absolute
;
width
:
100%
;
}
/*这个son设置了absoult,如果他的父元素有absolute,或者relative,name他就会以该父元素相对位置定位,否则以body定位*/
.son8
{
position
:
absolute
;
top
:
10px
;
left
:
40px
;
width
:
100%
;
height
:
30px
;
background-color
:
#665660
;
}
.son9
{
width
:
100%
;
height
:
30px
;
background-color
:
#663663
;
}
/*这个parent设置了absolute,设置top,left等,所以他以body进行定位*/
.parent2
{
position
:
absolute
;
top
:
80px
;
left
:
40px
;
width
:
100%
;
}
/*这个son设置了absoult,他的父元素有absolute,或者relative,他就会以该父元素相对位置定位*/
.son10
{
position
:
absolute
;
top
:
10px
;
left
:
40px
;
width
:
100%
;
height
:
30px
;
background-color
:
#086734
;
}
div
{
border
:
1px
solid
#888
;
}
</style>
</head>
<body>
<div
>
<p>
我只是个占位元素1
</p>
<p>
我只是个占位元素2
</p>
<p>
我只是个占位元素3
</p>
</div>
<div
>
<div
class=
"son6"
>
son6
</div>
<div
class=
"son7"
>
son7
</div>
</div>
<div
class=
"parent1"
>
<div
class=
"son8"
>
son8
</div>
<div
class=
"son9"
>
son9
</div>
</div>
<div
class=
"parent2"
>
<div
class=
"son10"
>
son10
</div>
</div>
<div
>
<p>
absolute
</p>
absolute的相对偏移对象分两种情况,1,父级或祖父级等也有absolute或者relative属性,2,任意层父级无前述属性。
<br><br>
1.父级有absolute或者relative属性。
<br><br>
当父级有该属性,则相对偏移位置为父元素偏移后所在位置为基准进行偏移。
<br><br>
son8父级有该属性,但父元素未设置偏移,因此父级仍是正常流布局,子元素以父级元素为基准进行偏移
<br><br>
son10父级有该属性,父元素设置偏移,因此父级相对body偏移,子元素以父级元素为基准进行偏移
<br><br>
2,任意层父级无absolute或者relative属性。
<br><br>
当无父级无该属性,则相对偏移位置以body为基准进行偏移。
<br><br>
son6父级无该属性,因此son6以body为基准偏移。
<br><br>
***同一个块内的元素,son6添加了absolute,son6发生偏移,son6实现了漂浮,失去了流布局位置,看起来像不受父元素约束,此时son7会接替son6的位置出现在正常的流中。
</div>
</body>
</html>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录