html 布局-相对位置及绝对位置

来源：http://zhykhs.javaeye.com/blog/338563

<html>

<head>

<title>Div + CSS Example, Wayhome's Blog</title>

<!--

body,td,th{font-family:Verdana;font-size:9px;}

-->

</style></head>

<body>

　position: absolute;<br />

　top: 5px;<br />

　right: 20px;<br />

position: absolute;<br />

left: 20px;<br />

bottom: 10px;<br />

</div>

　position: absolute;<br />

　top: 5px;<br />

　left: 5px;<br />

</div>

　position: relative;<br />

　left: 150px;<br />

　<br />

　width: 300px; height: 50px; <br />

</div>

　　　 padding: 20px 0 0 20px;

　　<div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color:#fff; ">absolute</span>;</div>

　　　　position: <span style="color:blue;">relative</span>;<br />

　　 left: 200px;<br />

　　 <br />

　　 width: 300px;<br />

　　 height: 300px;<br />

　　　 position: absolute;<br />

　　　 top: 20px;<br />

　　　 right: 20px;<br /></div>

　　　 position: absolute;<br />

　　bottom: 20px;<br />

　　left: 20px;<br />

　　</div>

</body>

</html>

一、 absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：

　　1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分(父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样)。

　　2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：

　　(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定，上面例子绿色部分。

　　(2). 父级有 position 属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。

二、relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。

html 布局-相对位置及绝对位置相关推荐

Android Studio 线性布局Linearlayout的控件位置控制l属性Layout_margin失效问题解决
Android Studio 线性布局Linearlayout的控件位置控制l属性Layout_margin失效问题解决问题:如layout_marginRight ="50dp" ...
html中相对位置与绝对位置介绍
描述一个地区的位置有两种方法:相对位置和绝对位置.本文主要介绍了html中相对位置与绝对位置的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着 ...
BannerLayoutSimple 支持图片无限轮播的 BannerLayout,支持自定义小圆点位置以及显示位置等等，反正支持的挺多的，源码也有注释
BannerLayoutSimple 项目地址: 7449/BannerLayoutSimple 简介:支持图片无限轮播的 BannerLayout,支持自定义小圆点位置以及显示位置等等,反正支持的挺 ...
html页面下拉条位置,iframe滚动条位置控制
javascript中如可控制iframe的滚动条位置我做了一个聊天室,嵌套了两个iframe,一个name叫mainframe,用来显示聊滚动条始终在最下端: window.οnlοad=func ...
R语言str_sub函数从字符串中提取或替换子字符串（substring）：str_sub函数指定起始位置和终止位置抽取子字符、str_sub函数指定起始位置和终止位置替换子字符串
R语言str_sub函数从字符串中提取或替换子字符串(substring):str_sub函数指定起始位置和终止位置抽取子字符.str_sub函数指定起始位置和终止位置替换子字符串目录
Transformer升级之路：二维位置的旋转式位置编码
©PaperWeekly 原创 · 作者 | 苏剑林单位 | 追一科技研究方向 | NLP.神经网络在之前的文章 Transformer 升级之路:博采众长的旋转式位置编码中我们提出了旋转式位置 ...
手机模拟位置实现精准位置营销效果分析
对微商来说,实现位置精准营销实在太重要的一个推广方法了,位置精准营销能让你的产品展示到全世界的人身边,大大增加产品的曝光度,同时也能打造好友数量,做圈内营销,这里分享一种我们经常在用的位置精准营销方法 ...
WPF 获取鼠标屏幕位置、窗口位置、控件位置
原文:WPF 获取鼠标屏幕位置.窗口位置.控件位置 public struct POINT{public int X;public int Y;public POINT(int x, int y){t ...
positional encoding位置编码详解：绝对位置与相对位置编码对比
目录前言 Why What 绝对位置编码相对位置编码 Sinusoidal Position Encoding Complex embedding How 前言相信熟悉BERT的小伙伴对posi ...
关于 OneNote 无法打开笔记本无法打开该位置没有该位置权限：
问题: 无法打开笔记本(别人共享的) 备注:问题开始之前请刷新一下DNS缓存 https://blog.csdn.net/ljason1993/article/details/83040313 (看 ...

html 布局-相对位置及绝对位置

html 布局-相对位置及绝对位置相关推荐

最新文章

热门文章