【CSS】定义元素的位置
CSS定义元素的位置
html元素的position属性，有4个属性值，分别是static、relative、fixed、absolute
static:
1、默认值，一般不显式设置为static
2、即使设置top、bottom、left、right，元素的位置不会发生改变
3、会随着页面滚动条移动
4、代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position static</title>
<style>
.static{
border: 2px solid red;
/*position: static; 不管有没有这行代码，浏览器中看到的效果都一样，因为默认情况下，元素的position值就是static*/
width: 100px;
height: 100px;
}
.wh{
width: 100%;
height: 800px;
background-color: grey;
}
</style>
</head>
<body>
<h1>position static</h1>
<div class="static">
div元素的position：static
</div>
<div class="wh"></div>
</body>
</html>
relative:
1、元素相对于它原来的位置进行移动，移动的参考物就是浏览器默认给元素渲染出的那个位置
2、需要设置top、bottom、left、right，元素的位置才会移动
3、不设置top、bottom、left、right，则元素的位置不会移动。
4、left的值可正可负，为正，则元素位置往右边移动，为负，则往左边移动。right、top、bottom也一样，可正可负
5、元素移动后，原来的位置还存在文档流中，不会被其他元素填充上去。
6、会随着页面滚动条移动
7、代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position relative</title>
<style>
.relative{
border: 2px solid red;
width: 300px;
height: 200px;
/*如果只设置position属性，而不设置top、bottom、left、right,则元素位置不会发生改变*/
position: relative;
top:15px;
left:100px;
} .wh{
width: 100%;
height: 800px;
background-color: grey;
}
p{
border: solid 1px blue;
}
</style>
</head>
<body>
<h1>relative</h1>
<div class="relative">
div element position:relative
</div>
<p>div位置移动后，p元素不会填充div元素移动前的那个位置</p> <div class="wh"></div>
</body>
</html>
fixed:
1、需要设置top、bottom、left、right，才会相对于它原来的位置进行移动，这点跟relative一样。
2、不设置top、bottom、left、right，则元素的位置不会移动。
3、元素在相对自己原来的位置移动后，页面滚动条滚动时，元素相对浏览器视图窗口的位置保持不变，即元素不会随着页面滚动条移动。
4、代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position fixed</title>
<style>
.fixed{
border: 2px solid blue;
width: 200px;
height: 100px;
/*如果只设置postion，而不设置top、bottom、left、right,则元素的位置不会发生改变*/
position: fixed;
top:200px;
left: 200px;
} .wh{
width: 100%;
height: 800px;
background-color: grey;
}
</style>
</head>
<body>
<h1>fixed</h1>
<div class="fixed">
div element position:fixed
</div>
<div class="wh"></div>
</body>
</html>
absolute:
1、移动参考物，是它的上级指定了位置的一个元素，它的上级元素可以是父级，也可以是父级的父级。
2、它的上级元素必须指定了position属性的值为relative、fixed、absolute之一(static排除在外)
3、需要设置top、bottom、left、right，元素的位置才会移动
4、一般会搭配一个position属性为relative的父级元素使用
5、代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position absolute</title>
<style>
.parent {
border: 2px solid red;
width: 400px;
height: 300px;
padding: 10px;
position: relative;
} .absolute{
border: 2px solid blue;
width: 200px;
height: 50px;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div class="parent">
parent element position:relative
<div class="absolute">
div element position:absolute
</div>
</div>
</body>
</html>
【CSS】定义元素的位置的更多相关文章
- css中元素的位置
一.display 1.display:none 隐藏标签 2.display:inline 将块级标签改为内联标签 3.display:block 将内联标签改为块级标签 4.display:inl ...
- CSS定义字体间距 字体行与行间距
CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性 属性含义 属性值 Word-s ...
- CSS块元素与内联元素（转）
为什么<a><span>这种标签定义width,height等CSS属性时会发现完全不生效? 因为它们不是容器,它们是内联元素,不是块元素 CSS 块元素与内联元素 关键字: ...
- 【CSS】元素样式
1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个C ...
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...
- （转）CSS定义字体间距 字体行与行间距
源网址:http://www.cnblogs.com/jian1982/archive/2010/07/03/1770349.html CSS定义字体行间距 line-height:xxpx; CSS ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- HTML。CSS浮动元素详解
浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
随机推荐
- CS229笔记：支持向量机
考虑一个分类问题,用\(1\)表示正类标签,用\(-1\)表示负类标签,引入假设函数\(h\): \[ \begin{align*} g(z) &= \begin{cases} 1 & ...
- PowerBI开发 第五篇：关系和交互
PowerBI 使用 内存的列式数据库 VertiPaq,用于对已发布的数据集进行数据压缩和快速处理,能够使PowerBI报表执行脱机访问,面向列的处理,高度优化对1:N关系的处理性能.关系是数据分析 ...
- H5——video百花齐放（浏览器自带的播放器）
前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...
- 学习git 新手。这个写的不错
转自:https://www.cnblogs.com/wupeiqi/p/7295372.html 版本控制 说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景 ...
- 部署jar项目常用命令
netstat -tunlp | grep ×× 查询出端口为××在运行应用的线程ip kill -9 ×× 关闭线程ip 为 ××的应用 rm -f ××.jar ...
- 2. Python3 基础入门
Python3 基础入门 编码 在python3中,默认情况下以UTF-8编码.所有字符串都是 unicode 字符串,当然也可以指定不同编码.体验过2.x版本的编码问题,才知道什么叫难受. # -* ...
- PAT甲题题解-1044. Shopping in Mars (25)-水题
n,m然后给出n个数让你求所有存在的区间[l,r],使得a[l]~a[r]的和为m并且按l的大小顺序输出对应区间.如果不存在和为m的区间段,则输出a[l]~a[r]-m最小的区间段方案. 如果两层fo ...
- maybe i have no answer
怎么说呢,我从小学开始到高中,大学.我觉得老师对大家都是一样的,虽然我因为父母的原因可能和老师接触比较多,但是学业上其实没什么帮助的. 我更希望老师能给我人生道路上的指点,虽然自己的道路确实是自己走出 ...
- DOM父节点、子节点例子
父节点 <body> <ul id="oUl"> <li><a href="#">隐藏1</a>&l ...
- Python日志模块简单使用
def loginfo(info): # create logger logger = logging.getLogger('[cpu and mem]**********') # Set defau ...