CSS position 属性基础入门css中常用position定位属性介绍_布局基础教程

css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种:1、static(静态定位):这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。也就是按照文档的书写布局自动分配在一个合适的地方,这种定位方式用margin来改变位置,不能使用top,botto

CSS position 属性基础入门css中常用position定位属性介绍

css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种:

1、static(静态定位):

这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。也就是按照文档的书写布局自动分配在一个合适的地方,这种定位方式用margin来改变位置,

不能使用top,bottom,left,right和z-index。  这种定位不脱离文档流;

CSS position 属性基础入门css中常用position定位属性介绍_布局基础教程

2、relative定位(相对定位):

该定位是一种相对的定位,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(在父元素由多个相对定位的子元素时可以看出),且会占用该元素在文档中初始的页面空间,即在使用top,bottom,left,right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。这种定位不脱离文档流;

3、absolute定位(绝对定位):

绝对定位方式,脱离文档流,不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位,如果其所有的父级元素都是static定位,那么此元素最终则是以当前窗口作为参考进行定位。可以使用topbottomleftright进行位置移动,亦可使用z-indexz轴上面进行移动。当元素为此定位时,如果该元素为内联元素,则会变为块级元素,即可以直接设置其宽和高的值;如果该元素为块级元素,则其宽度会由初始的100%变为auto。

注意:当元素设置为绝对定位时,在没有指定topbottomleftright的值时,他们的值并不是0,这几个值是有默认值的,默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。(可能我没有描述的很清楚,建议自己写个示例看看效果)。在没有父元素的条件下,它的参照为body。


4、fixed(固定定位):这种定位方式是相对于整个文档的,只需设置它相对于各个方向的偏移值,就可以将该元素固定在页面固定的位置,通常用来显示一些提示信息,脱离文档流;5、inherit定位:这种方式规定该元素继承父元素的position属性值。
注释:脱离文档流指元素在文档中被删除,该元素原先的位置被其它元素填充。

海计划公众号
(0)
上一篇 2020/04/05 01:50
下一篇 2020/04/05 01:50

您可能感兴趣的内容

  • H5视频交互小白基础_视频入门基础

    注意在uc浏览器和ios微博里面,是不支持视频交互的,暂时没有办法把层级放在视频上方,IOS 必须用click事件点击之后视频才会播放,不支持自动播放 安卓环境下,视频播放会全屏播放,播放完之后不会回到原页面,可以做个display: none 让视频退出全屏微信解决视频层级播放问题腾讯接入文档链接:https://x5.tencent.com/tbs/gu

    2020/03/24
  • css3 过渡和动画入门指南_动画入门知识

    过渡 transition1.过渡的定义和使用在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果,希望它以动画的形式在一定的时间内,从旧的样式转变成新的样式,而这个过程就是过渡。过渡其实

    2020/03/23
  • Rest/Spread 属性入门知识探索 ES2018 和 ES2019_es6使用攻略

    Rest/Spread 属性Sebastian Markbåge的ECMAScript提案『Rest/Spread属性』可以:rest操作符(…)在对象解构中的使用。目前,该操作符仅适用于数组解构和参数定义。spread操作符(…)在对象字面量中的使用。目前,这个操作符只能在数组字面量和函数以及方法调用中使用。在对象解构中使用rest操作符(…)在对象解

    2020/04/05
  • slugify菜鸟教程下载_对于URLs、文件名和IDs很实用的Js处理类

    slugify菜鸟教程下载 GitHub:https://github.com/sindresorhus/slugify 简介描述:对于URLs、文件名和IDs很实用的Js处理类 …

    2020/03/10
  • 如何成为10倍速的程序员使用帮助_程序员使用指南

    国外有个词叫做10x Programmer,直译是以一当十的程序员。我并不认为一个技术大牛能完成10个普通程序员的工作,技术大牛会花1/10的时间把工作做完,然后用剩下9/10的时间平衡生活、爱好和未来,所以我仅把10x Programmer叫做10倍速的程序员。也许有人会觉得这种定义太过狭隘,没错,确实狭隘。不同的程序员处在不同的技术水平阶段,有着不同的人

    2020/04/05
  • 挑选 npm 模块很费事?掌握这些技巧就能事半功倍!菜鸟教程网_npm入门基础知识

    熟悉 Node 或前端 JavaScript 工作的同学都知道,社区中的可用模块有数十万之多。开发人员经常会提问或抱怨,比如说:“开发易,选模块难…”“X 模块和 Y 模块区别在哪里,哪一个更好?”“npm 很好用,可是那些模块指不定半年一年多就没用了,具体看它们的支持情况。”在谈到这些问题时,你通常会得到十个不同的答案。每个人都会向你推荐他最宝贝的模块,然

    2020/03/26
  • 大数据框架有哪些?Hadoop、Spark等5种大数据框架对比小白帮助_大数据菜鸟教程网

    大数据处理框架是什么?处理框架和处理引擎负责对数据系统中的数据进行计算。虽然“引擎”和“框架”之间的区别没有什么权威的定义,但大部分时候可以将前者定义为实际负责处理数据操作的组件,后者则可定义为承担类似作用的一系列组件。例如Apache Hadoop可以看作一种以MapReduce作为默认处理引擎的处理框架。引擎和框架通常可以相互替换或同时使用。例如另一个框

    2020/03/31
  • 移动端调试工具推荐入门基础知识_调试攻略教程

    之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome调试工具也没报错呀!就把她手机拿过来看了看,发现一进去还真就是一片空白。WTF(手动黑人问号)!!!那问题就来了,开发环境下没报错,可真机又出现了意料之外的情况,而且没法像 P

    2020/03/29
  • js实现无限瀑布流菜鸟指南_瀑布流基础入门

    瀑布流是一种常见的网页布局方式,在许多网站中我们都能看到“瀑布流”的效果,其特征是有网页视窗有多个高度不同宽度相同的“块”组成。因其样式酷似飞流直下的瀑布,故将这种布局方式称为瀑布流。生活中瀑布流实例:花瓣网在css中我们学习过使用Multi-columns来实现瀑布流的效果,通过 Multi-columns 相关的属性 column-count、colum

    2020/03/24
  • in-view入门教程_当DOM元素进入或退出视区时收到通知

    in-view入门教程 官方网址:https://camwiegert.github.io/in-view GitHub:https://github.com/camwiegert…

    2020/03/06
  • 网站防刷限流基础入门_nginx菜鸟知识

    我在nginx 和tengine 之间选择了tengine。tengine是淘宝公司在nginx 研发的。同时也测试过nginx 在一些功能方面不是很好。比如:限流这块,nginx目前只支持对ip限流还有对后端服务器的检测方面都不如tengineTengine version: Tengine/2.3.1
    nginx version: nginx/1.16.

    2020/03/22
  • jquery.imageuploader.js使用帮助一款jquery多文件上传插件

    jquery.imageuploader.js基础入门 官方网址:http://quickenloans.github.io/jquery-imageuploader-js/ Gi…

    2020/03/05
  • 如何使用 React hooks 获取 api 接口数据小白教程_接口使用帮助

    在本教程中,我想向你展示如何使用 state 和 effect 钩子在React中获取数据。 你还将实现自定义的 hooks 来获取数据,可以在应用程序的任何位置重用,也可以作为独立节点包在npm上发布。如果你对 React 的新功能一无所知,可以查看 React hooks 的相关 api 介绍。如果你想查看完整的如何使用 React Hooks 获取数据

    2020/03/24
  • VUE路由转场特效,WebAPP的前进与后退教程视频_特效入门教程

    一、效果图 二、思路 1. 定义两个 CSS 过度动画,前进与后退: slide-right-enter 和 slide-left-enter 2. 给路由配置meta信息,设置各个路由的级别: index 3. 监控路由跳转,比对 meta 信息级别,如果从大跳转到小说明是返回,从小跳转到大则是前进 三、具体代码APP.vue

    2020/03/31
  • 不要浪费时间写完美代码小白帮助_代码基础指南

    一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间。代码重要性区分随着对代码是如何改变的研究,致力于代码修改艺术的人发现了一个代码库的规律曲线。每个系统都有很多从未改变的代码。但是也有小部分非常重要且有用的代码一次又一次的改变,经过了多次重构

    2020/04/06
  • web前端错误监控小白指南_错误菜鸟教程

    为什么要做前端错误监控?1. 为了保证产品的质量2. 有些问题只存在于线上特定的环境3. 后端错误有监控,前端错误没有监控前端错误的分类前端错误分为两类: 即时运行错误和资源加载错误即使运行错误的捕获方式即时运行错误的捕获方式分为两类try…catchwindow.onerrortry…catch通过try…catch我们能够知道出错的信息,并且

    2020/03/29