CSS中的定位

定位

关于定位
我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:

  • relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移
  • absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
  • fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
  • static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性
relative 相对定位,不脱离文档流,相对于自己本身的位置进行定位,
absolute 绝对定位,脱离文档流,位置相对于已定位的父级,如果没有父级,或父级没有定位,那么相对于文档的00点 (body)
fixed 固定定位,脱离文档流,位置相对于浏览器窗口 进行定位

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级

定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级

典型定位布局
1、固定在顶部的菜单
2、水平垂直居中的弹框
3、固定的侧边的工具栏
4、固定在底部的按钮

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/455839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

servlet中中文正常显示,mysql数据库手动插入中文正常显示,servlet向mysql中插入中文显示乱码...

作者:http://5563447.blog.51cto.com/5553447/1422627 问题是:就是POST请求提交表单数据给servlet,通过JDBC插入Mysql,出现中文乱码。 解决方式:在url后面加这句 ?useUnicodetrue&characterEncodingutf-8 我的项目: 结果&am…

rtp问题引领汇总

视频网络传输一定要用rtp吗? RTP/RTCP有一套很好的反馈机制,通过其可以估算网络状况,然后在编码端进行调整,如网络繁忙时适当的降低画面质量,减小码率等,主要是想通过RTP/RTCP协议实现QoS!同时…

Django的信号机制详解

Django的信号机制详解 Django提供一种信号机制。其实就是观察者模式,又叫发布-订阅(Publish/Subscribe) 。当发生一些动作的时候,发出信号,然后监听了这个信号的函数就会执行。 Django内置了一些信号,比如: django.…

垃圾回收算法_垃圾回收算法有哪些

垃圾检测通常通过建立一个根对象的集合以及建立一个从这些根对象开始能够触及的对象集合来实现。如果正在执行的程序可以访问到根对象和某个对象之间存在引用路径,这个对象就是可触及的。对于程序来说,根对象总是可以访问的。从这些根对象开始&#xff0…

不错的电子书下载网站

为什么80%的码农都做不了架构师?>>> www.jb51.net 电子书质量不错,虽然是扫描版的,但是都是高清的. vdisk.weibo.com 网盘, 内容很多! 转载于:https://my.oschina.net/GMT/blog/1188971

GeoHash核心原理解析

原文地址:http://www.cnblogs.com/LBSer/p/3310455.html geohash for php:附件下载geohash.tar.gz 引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西。某一天机机到北海公园游玩,肚肚饿了&am…

[转载]流行视频格式讲解

*. MPEG/.MPG/.DAT MPEG也是Motion Picture Experts Group 的缩写。这类格式包括了 MPEG-1, MPEG-2 和 MPEG-4在内的多种视频格式。MPEG-1相信是大家接触得最多的了,因为目前其正在被广泛地应用在 VCD 的制作和一些视频片段下载的网络应用上面,大部分的…

Ajax相关介绍

ajax是什么? AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。 AJAX 是一种在 2005 年由 Google 推广开来的编程模式。 AJAX 不是一种新的…

解决Ubuntu中文件管理器死掉的情况

有时会遇到Ubuntu文件管理器死掉的情况,怎么点击都没有反应,这时只需在终端上运行 ps -A | grep nautilus, 查找文件管理器nautilus对应的pid,然后sudokillpid就可以关闭文件管理器进程,随便点击一个文件夹就可以重启文件管理器了…

element table 怎么知道点击的是第几行_el-data-table, 让CRUD更简单??

基于Vue2.x, element-ui 2.x,以及开源组件el-form-renderer封装了一个业务组件el-data-table,已在github开源,其目标是:makes restful api crud easily 特点:1. 使用axios自动发送请求2.自带新增/修改/删除逻辑(默认新…

Win10无法使用小娜搜索本地应用问题的解决方案

小娜介绍 win10的Cortana小娜是一个功能非常强大的语音和搜索助手,用户可以通过小娜助手搜索任意的文件和应用软件,不过有用户发现win10的小娜搜索不到已安装的本地软件,那么win10小娜助手无法搜索本地应用怎么解决呢?下面小编教大…

样本量

sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare 根据power,effect size,a,决定样本量 # -*- cod…

【Python】 dict 以key名 去重运算

将日期相同的数据统计在一起 a_count [ {create_time: 2020-03-05, total_len: 1, count_invite: 1}, {create_time: 2020-03-11, total_len: 2, count_invite: 2}, {create_time: 2020-03-18, total_len: 2, count_invite: 2}, {create_time: 2020-03-06, total_len: 1, …

Vue相关知识总结

Vue简介 Vue是js的一个库,类似于JQuery Vue当前版本已经发展到2.X版本,并且现在市面上基本使用的都是2.X版本. 现在一些知名的互联网公司,例如滴滴,美团等,都在大量的使用vue 本段内容主要讲解Vue的基本知识和指令,了解vue的基本概念 注意: Vue 不支持 IE8 及以下版本 vue中…

宏块帧内预测的具体过程

对一个宏块进行帧内预测的具体过程如下: (1)对于8x8色度块就选择一种帧内色度预测模式建立相应的帧内预测块; (2)按遍历的方法分别计算4种Intra_16x16帧内预测模式的代价(Rdcost16x16&#xf…

qt获得 cpu 主频信息_高主频有什么用?我们玩了几款3A大作找到答案

[PConline 杂谈]对于热爱游戏的人来说,能在极致特效下流畅运行喜欢的游戏是一件幸事,因此作为影响游戏运算的CPU重要性不容小视。CPU如何判定?众所周知,核心数和主频算是判定一个CPU好坏的主要依据,但大多数CPU产品在高…

解决:关于Git无法提交 index.lock File exists的问题

问题 今天提交代码时,在一次提交,莫名其妙没成功后,再次用git commit -a命令时,出现以下错误,无论是用git还是TortoiseGit等其他客户端都会出现以下这个问题。。 错误日志 $ git commit -a fatal: Unable to create …

span居中

在父元素中加style"text-align:center"; 比如下面这样 <head></head><body><div style"width:300px;border:1px red solid;text-align:center;"><span style"width:100px;">测试</span></div></bo…

打造自己的 APP「冰与火百科」(一):分析定位

回想自己最开始学习 Android 的动力&#xff0c;其实很简单&#xff0c;就是想在手机上看到自己设计的 APP。但是在工作后&#xff0c;一直做的都是「别人」的 APP&#xff0c;偶尔还要做一些自己不太认可的设计和交互&#xff0c;从中获取到的成就感还不及第一次在手机上看到「…

python爬取有道翻译

python爬虫爬取有道翻译教程 编写环境 为了宝宝们能够正确读懂本教程,在正式开始前,宝宝们需要搭建的环境如下: 连接互联网的win10电脑,(win7也可以)Google浏览器(版本无要求)Python(版本3就可以了),如果没有安装的小伙伴可以参考python安装以及版本检测requests库(版本没啥…