CSS-15-定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*定位:
position:定位属性;
/*relative:生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移*/
/*absolute:生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位;*/
/*fixed:生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览窗口进行定位*/
/*static:默认值,没有定位,元素出现在正常的文档流中,相对于取消定位属性或者不设置定位属性*/
body{
margin: 0;
}
.position1{
width: 200px;
height: 200px;
background-color: yellowgreen;
text-align:center;
line-height:200px;
position: relative;
/*以元素本身当前位置为参考点*/
left: 100px;
top:100px
}
.position2{
width: 200px;
height: 200px;
background-color: yellow;
text-align:center;
line-height:200px;
position:absolute;
/*以设置了定位的父(爷...)级元素当前位置为参考点*/
left: 100px;
top:100px
}
.position3{
width: 200px;
height: 200px;
background-color: gray;
text-align:center;
line-height:200px;
position:fixed;
/*以浏览窗口为参考点,不会随滚动条的移动而移动*/
left: 300px;
top:300px
}
.fix{
width: 80px;
height: 20px;
line-height: 20px;
text-align: center;
background-color: gainsboro;
position: fixed;
/*以浏览窗口为参考点,不会随滚动条的移动而移动*/
bottom: 20px;
left: 50px
}
</style>
</head>
<body style="height: 5000px;">
<div class="position1">
box1
<div class="position2">box2</div>
<div class="position3">box3</div>
</div>
<div class="fix">
返回顶部
</div>
</body>
</html>
CSS-15-定位的更多相关文章
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- CSS 的定位方式和含义
CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...
- CSS中定位机制的想法
对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...
- 转：Selenium之CSS Selector定位详解
CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式. 百度输入框: <input name=&quo ...
- CSS 中定位的使用
position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...
- css的定位机制
牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
- CSS之定位布局（position，定位布局技巧）
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- Selenium自动化-CSS元素定位
接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式 大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...
- selenium中CSS选择器定位
selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...
随机推荐
- UE4 C++ 代码编译方式
Unreal 有一个非常酷的特性 —> 不必关闭编辑器就可以编译 C++ 更改! 有两种方法可以达到这个目的: 1.直接点击编辑器主工具栏中的 编译(Compile) 按钮. 2.在编辑器继续运 ...
- Visual Studio Team Services使用教程【6】：Readers tfs组checkin权限修改
你也可以只开启部分代码的权限 把上面开启的整个应用的权限先去掉 只开启一个文件的权限 2017.4.23之后建议朋友看下面的帖子 TFS2017 & VSTS 实战(繁体中文视频) Visua ...
- slim中返回结果加密的
//返回结果不加密 $this->get("/open]",function (Request $request, Response $response, $args) { ...
- 微信群打卡机器人XiaoV项目开源 | 蔡培培的独立博客
原文首发于蔡培培的独立博客.原文链接<微信群打卡机器人XiaoV项目开源>. 5月21日,在米花(后面" 亚里士多德式友谊"专题会提及)的影响下,决定搞个私人运动群,拉 ...
- 14.python函数
原文:https://www.cnblogs.com/linhaifeng/articles/6113086.html 1.python中函数定义:函数是逻辑结构化和过程化的一种编程方法. pytho ...
- 洛谷$P4755\ Beautiful\ Pair$ 最大值分治
正解:最大值分治 解题报告: 传送门$QwQ$ 昂考虑如果已经钦定了点$x$是这个$max$了,然后现在要求有多少对$[l,r]$满足$a_x=max\left\{a_i\right\},i\in[l ...
- 电脑端TIM登录时记住密码
为什么每次登录TIM时点了记住密码,下次再登录时还是记不住呢? 不是扫码就是还得输出密码,为这事愁了好多次, 最近终于发现如何记住密码了... 进入登录界面以后,点击左下角这个小图标>> ...
- 「USACO11NOV」牛的障碍Cow Steeplechase 解题报告
题面 横的,竖的线短段,求最多能取几条没有相交的线段? 思路 学过网络流的童鞋在哪里? 是时候重整网络流雄风了! 好吧,废话不多说 这是一道最小割的题目 怎么想呢? 要取最多,那反过来不就是不能取的要 ...
- Vue+Vant+Vuex实现本地购物车功能
通常,我们做移动端商城的时候,通常会有购物车模块,那购物车模块有两种实现方式,一是储存在后台通过接口获取到购物车信息,二是存在用户手机本地,第一种方法只要调用接口获取比较简单,这里介绍的是第二种方法, ...
- 小小知识点（五十一）——6G扬帆起航：拍赫兹通信与健康泛在网络助推6G新应用
转自IEEE科技纵览 https://weibo.com/ttarticle/p/show?id=2309404454066502631625 6G扬帆起航:拍赫兹通信与健康泛在网络助推6G新应用 ...