css中position理解

最新推荐文章于 2018-10-30 15:44:23 发布
最新推荐文章于 2018-10-30 15:44:23 发布
阅读量624 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supernever/article/details/44928257
版权

position属性的合法值有static、fixed、relative和absolute四种。

static是position的默认值，表示有关元素将按照他们在标记里出现的先后顺序出现在浏览器窗口里。relative的含义与static相似，区别在于position属性等于relative的元素可以通过应用float属性从文档的正常顺序里脱离出来，即浮动

如果把某个元素的position属性设置为absolute（元素相对于position不为static的第一位祖先元素的定位）。我们就可以把它摆放到容纳它的容器的任何位置，容器要么是文档本身要么是一个有着fixed或relative属性的父元素。这个元素在原始标注里出现的位置与它的显示位置无关，可以设置top、bottom、left和right属性。

fixed是相对于浏览器的定位

supernever
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
谈谈你对css中position五个属性的理解
09-24
position有五个属性： static | relative | absolute | fixed | inherit，也许你看到这个标题觉得很简单，确实这是一篇关于CSS中Position属性基础知识的文章，但是关于Position的一些细节也许你不了解，感兴趣的朋友...
CSS深入理解position
陌里二
04-02 190
Static 元素正常生成 块级元素生成一个矩形框 行内元素创建一个或多个行框 默认属性 Relative 元素框偏移某个距离，它原本所占的空间仍保留 Absolute 元素框从文档流完全删除 相对于其包含框定位 就好比元素根本不存在过->定位后生成一个块级框 Fixed 类似于absolute 但是其包含框是视窗本身 Relative & Absolute ...
CSS position详解
前端小白
08-26 1880
1.首先必须说明的，是浏览器渲染DOM的原理。浏览器根据html中的顺序依次渲染，对文字图片等进行分块，一个块接一个块渲染。 2.接下来，要说明的是，可以设置块的大小。 3.然后看一下position， position属性有四个值，static、relative、absolute、fixed。         A.static：这个值表示默认，让浏览器按照没有positio
CSS position最容易的理解
qq_23111247的博客
10-30 146
原文参考：https://www.cnblogs.com/wlqh/p/6170135.html 代码 <html> <div id="example"> <div id="div-before"&a
css中position的定义
caopeng777的专栏
11-20 832
1.absolute： position #father { width:200px; height:100px; position:reletive; background-color:blue; } #son { width:100px; height:50px; position:absolute; background-color:gray; top:20px;
关于css中position解释
weixin_34235135的博客
12-24 76
----------------------------这是3个div来研究position用法 今天终于指导css，position中absolute的用法，某个元素设置了position，它会在他的dom树中找到离它最近的设置了position值的基点设置自己的位置。如图1，box2的position：absolute，他父级bo...
CSS之Position全面认识
09-25
CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，新手朋友们可以学习下
理解CSS浮动float、定位position
09-27
本文针对CSS浮动float、定位position进行学习理解，通过实例帮助大家掌握CSS浮动float、定位position技巧，感兴趣的小伙伴们可以参考一下
css position 定位
01-19
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的...
css中position详解
u014717881的博客
03-24 149
首先position 有四个取值  static|relative | absolute | fixed方法： position: static | relative | absolute | fixedtop:left:bottom:right:详细内容1.static不脱离文档流 设置 top／left 无效2. relative不脱离文档流 参照自身在文档流中的位置进行定位3. absolu...
css中的position属性
Liusion的博客
02-22 304
http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html http://www.bubuko.com/infodetail-841243.html
利用css3中的after和content制作简单的tooltip
supernever专栏
08-31 1311
> 主要使用css中的：after伪类，以及content属性 代码块代码块语法如下：.tooltip-block:hover:after{ border: 1px solid #fc0; padding: 3px 6px; background: #fffea1; content: attr(data-title); position: absolute;
css3笔记--transition相关属性
supernever专栏
06-17 1130
过渡相关属性： css3过渡效果涉及到四个属性，也可以使用包含这四个属性的缩写。 transition-property:要过渡的css属性名称（比如background-color、text-shadow或者all使用all则过渡会被应用到每个可能的css属性上）transition-duration:定义过渡效果持续的时间（单位为秒如，.3s、.2s或者1.5s）transitio
html权威指南笔记
supernever专栏
05-26 784
html5权威指南笔记（顺序阅读）标签基本分类（块元素以及内联元素）： 块元素 块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较特殊，它只能用来容纳其他块元素。另外div、ul、h1-h6都是比较常见的。 内联元素 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内
node-v10.22.0-darwin-x64.tar.xz
最新发布
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于JAVA的物流管理系统的源码设计与实现.zip
05-03
毕业设计-->物流管理系统的设计与实现（Java版本） 采用Struts2+hibernate+Oracle10g+Tomcat 涉及车辆管理，配送点管理，运输方式管理，订单管理，员工管理，用户管理，部门管理，权限管理，角色管理等基础管理功能。
基于VB+access实现的成绩分析统计系统(论文+源代码).zip
05-03
基于VB+access实现的成绩分析统计系统(论文+源代码) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
node-v10.14.2-linux-x64.tar.xz
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
对CSSSprites的理解
03-23
CSS Sprites 是一种将多个小图片合并成一张大图的技术，通过 CSS 的 background-position 属性来控制显示的位置，从而减少 HTTP 请求次数，提高网页加载速度。这种技术在网页设计中非常常见，特别是在需要使用大量小图标的场景下。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值