html固定按钮相对位置,CSS基础之相对定位,绝对定位,固定定位,z-index
1.相对定位
1.1.相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位
a position:relative; → 必须先声明,自己要相对定位了
b left:100px; → 然后进行调整。
c top:150px; → 然后进行调整。
Document
div{
width: 200px;
height: 200px;
}
.box1{
background-color: yellowgreen;
}
.box2{
background-color: skyblue;
position: relative;
top: 150px;
left: 100px;
}
.box3{
background-color: orange;
}
图片.png
1.2.不脱标,老家留坑,形影分离,相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。
图片.png
1.3.相对定位的用途:相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:
a:微调元素
b:做绝对定位的参考,子绝父相
1.4.相对定位的定位值
a:可以用left、right来描述盒子右、左的移动,相当于marginLeft ,marginRight
b:可以用top、bottom来描述盒子的下、上的移动,marginTop,marginBottom
图片.png
图片.png
图片.png
2.绝对定位
2.1.绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了:
Document
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: yellowgreen;
}
.box2{
background-color: skyblue;
position: absolute;
top: 100px;
left: 140px;
}
.box3{
background-color: gold;
}
图片.png
2.2.参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角,如果用bottom描述,那么就是对应的页面的左下角,当页面滚动时,这个盒子显示的位置也跟者滚动。绝对定位脱标!:
Document
div{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
bottom: 100px;
left: 100px;
}
图片.png
2.3. 以盒子为参考点
a:一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。
Document
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
border: 10px solid red;
margin: 100px;
position: relative;
}
p{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 40px;
left: 40px;
}
图片.png
b: 不一定是相对定位,任何定位,都可以作为参考点,子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是,工程上子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。工程上,“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。
Document
*{
margin: 0;
padding: 0;
}
.box1{
width: 400px;
height: 400px;
padding: 100px;
border: 10px solid red;
margin: 100px;
position: relative;
}
.box2{
width: 300px;
height: 300px;
border: 50px solid blue;
}
p{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 40px;
left: 40px;
}
图片.png
2.4.绝对定位的盒子居中
Document
div{
width: 400px;
height: 60px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -200px;
}
图片.png
3.固定定位
3.1.固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。固定定位脱标!
Document
p{
width: 100px;
height: 100px;
background-color: orange;
position: fixed;
top: 100px;
left: 100px;
}
图片.png
Document
*{
margin: 0;
padding: 0;
}
body{
/*为什么要写这个?*/
/*不希望我们的页面被nav挡住*/
padding-top: 60px;
/*IE6不兼容固定定位,所以这个padding没有什么用,就去掉就行了*/
_padding-top:0;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
z-index: 99999999;
}
.inner_c{
width: 1000px;
height: 60px;
margin: 0 auto;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
}
.inner_c ul li a:hover{
background-color: gold;
}
p{
font-size: 30px;
}
.btn{
display: block;
width: 120px;
height: 30px;
background-color: orange;
position: relative;
top: 2px;
left: 1px;
}
- 网页栏目
- 网页栏目
- 网页栏目
- 网页栏目
- 网页栏目
- 网页栏目
- 网页栏目
- 网页栏目
- 网页栏目
- 网页栏目
按钮
图片.png
4.z-index值
● z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位,就是一个正整数。默认的z-index值是0。
● 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
● 从父现象:父亲怂了,儿子再牛逼也没用。
Document
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: yellowgreen;
position: absolute;
top: 100px;
left: 100px;
z-index: 444;
}
.box2{
width: 200px;
height: 200px;
background: skyblue;
position: absolute;
top: 180px;
left: 180px;
z-index: 333;
}
图片.png
如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。
Document
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: yellowgreen;
}
.box2{
width: 200px;
height: 200px;
background: skyblue;
position: relative;
top: 100px;
left: 30px;
}
.box3{
width: 200px;
height: 200px;
background: pink;
/*为了z-index值生效,必须加上一个定位:*/
position: relative;
top: 0;
left: 0;
z-index: 999;
}
图片.png
从父现象:父亲怂了,儿子再牛逼也没用。
Document
*{
margin: 0;
padding: 0;
}
.linzhiying{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
z-index: 10;
}
.tianliang{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
z-index: 9;
}
.kimi{
width: 60px;
height: 60px;
background-color: green;
position: absolute;
top: 300px;
left: 450px;
z-index: 454;
}
.cindy{
width: 60px;
height: 60px;
background-color: pink;
position: absolute;
top: 130px;
left: 490px;
z-index: 45454;
}
图片.png
html固定按钮相对位置,CSS基础之相对定位,绝对定位,固定定位,z-index相关推荐
- 相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景 相对定位 <!DOCTYPE html> <html lang="e ...
- 相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法
相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法 一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
- CSS基础总结(五)定位
文章目录 1.为什么需要定位 2.定位的组成 2.1公式 2.2定位模式 2.2.1静态定位static 2.2.2相对定位relative 2.2.3绝对定位absolute 2.2.4固定定位fi ...
- 在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局 本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局 思路:将 ...
- HTML+CSS---定位(相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度(opacity属性定义元素的不透明度--IE的半透明滤镜)---外边线
文章目录 定位 静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序 表单 设置光标样式 透明度 opacity属性定义元素 ...
- android 固定底栏位置,电脑底端任务栏固定位置应该如何设置?在哪里设置?
电脑底端任务栏固定位置应该如何设置?在哪里设置? 电脑下边的任务栏通常是固定在底端的,但是有很多小伙伴并不喜欢,今天我们就来教大家如何将其固定在电脑的其他位置~下面就是具体的过程啦~ 具体如下: 1. ...
- CSS基础(19)_绝对定位元素的水平或垂直布局
文档流中布局 一个元素在其父元素中,水平布局之前是要满足以下等式: margin-left+border-left+padding-left+width+padding-right+border-ri ...
- html笔记(一)html4+css2.0、css基础和属性、盒模型
w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
- 前端html和css基础知识
第一天 常用的浏览器和内核 1.谷歌(chrome)前端工程师必备 2.firefox 火狐 3.safari iphone ipad 苹果 4.IE/Edge微软 5.Opera 欧鹏 HTML骨架 ...
最新文章
- 详解PyTorch编译并调用自定义CUDA算子的三种方式
- 图形驱动程序和显卡驱动什么区别_我们常说的计算机驱动程序到底是什么,深入解读驱动程序本质...
- 算法与数据结构(排序算法概述)
- 解读百度Q4财报:智能云以三大关键词进位“第二引擎”,强势驱动百度未来
- [云炬python3玩转机器学习笔记] 1-1什么是机器学习
- leetcode题目解析(js)--链表
- SpringMVC学习笔记(二)常用注解
- G20杭州峰会上云 实现0安全事件
- 状态栏和navigationbar 关联上,结构体总是通过被复制的方式在代码中传递,因此请不要使用引用计数。...
- 移动端的注册登录设计灵感!
- [转载] python函数分为哪几种_python常用函数
- 绘制箱线图的标签python_利用Python - Matplotlib 绘制箱线图
- python按照日期筛选excel_用python判断Excel单元格格式为输出日期(日期字段位置不固定)的,按datetime格式输出日期(而非float)_python excle 日期列...
- (1) Kubernetes基本概念和术语
- Ubuntu 图形界面入门
- TikTok(国际版抖音)时间线
- oracel的安装和卸载
- php 开发模式 自定义,smartprinter虚拟打印机 smarty+adodb+部分自定义类的php开发模式...
- 500VIP源码下载
- 人脸识别技术原来还有这个用途?赶紧get
热门文章
- C语言 关系运算符及其优先级
- 移除JSON对象中的某个属性
- Linux和大数据学前准备和踩过的那些坑[亲测可用]
- Oracle BBED单个数据文件跳过所有归档恢复
- Excel学习笔记:P16-VLOOKUP函数与绝对参照设定
- 想要邮件撤回,邮箱登录入口用哪个呢?
- tomcat环境下部署php开发环境
- 东莞四中2021年高考文科成绩查询,广东东莞2021年普通高中学业水平合格性考试成绩查询入口(已开通)...
- Unity UI适配不同比例分辨率的设置
- java 模拟键盘输入_Java 在windows 下模拟鼠标键盘的输入