使用position属性的心得
1、使用position中的absolute要与relative配套使用,如果不使用relative时默认absolute会用整个视窗作为参照物;如果relative放在absolute的父级标签上,则absolute会以父级块标签作为参照物调整位置,absolute要使用top、left、right、bottom属性来调整位置
2、使用position的fiexed是固定定位。我在使用时遇到的问题:
,
上面是有问题的图片,导航栏没有固定到在顶部。

注意:试验中,上面图片中的position是fiexed而不是relative
因为使用position的fiexed没有加上top:0所以没有固定到顶部。


添加了top之后我的导航栏变正常了,不会像上图那样漏出一条缝
使用position属性的心得的更多相关文章
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- position属性的四个value
As we all know, position属性有四个值,分别为 relative,fixed,absolute, static. 1,relative相对定位 (不会脱离文档流) 在一个相对定位 ...
- 几种Position属性的用法
几种Position常见的属性就是一下几种: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.re ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
随机推荐
- Jasper:API / API 策略和最佳做法
ylbtech-Jasper:API / API 策略和最佳做法 1.返回顶部 1. API 策略和最佳做法 Cisco Jasper 已经建立了一项 API 公平使用策略,确保所有 Control ...
- [hdu2457]DNA repair(AC自动机+dp)
题意:给出一些不合法的模式DNA串,给出一个原串,问最少需要修改多少个字符,使得原串中不包含非法串. 解题关键:多模式串匹配->AC自动机,求最优值->dp,注意在AC自动机上dp的套路. ...
- Asset Catalog Help (六)---Adding OS X Icons
Adding OS X Icons Simplify image management by storing your OS X icons in an asset catalog. 把OS X图标存 ...
- 我所理解的Restful API最佳实践
一直在公司负责API数据接口的开发,期间也遇到了不小的坑,本篇博客算是做一个小小的记录. 1. 不要纠结于无意义的规范 在开始本文之前,我想先说这么一句:RESTful 真的很好,但它只是一种软 ...
- Flutter实战视频-移动电商-22.JSON解析和复杂数据模型转换技巧
22.JSON解析和复杂数据模型转换技巧 json转Model类 创建model文件夹,在里面新建category.dart类 主要根据这个json来分析我们要做成类的样子 { ", &qu ...
- 一个C#开发者重温C++的心路历程
不知道为什么,似乎很多人理解跑偏了,在这里我要说明一下. 首先,我并没有对C++语言有偏见,我只是单纯的在学习时,在理解时,对C++语言进行一些吐槽,我相信,很多学习C++的人,也会有类似的吐槽. 其 ...
- E20180518-hm
priority n. 优先,优先权; (时间,序上的) 先,前; 优先考虑的事; [数] 优先次序;
- 201621123016《Java程序设计》第三周学习总结
1. 本周学习总结 1.初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联系.步骤如下: 1.1 写 ...
- gSoap学习笔记
http://www.cnblogs.com/xiangism/archive/2012/11/14/2770242.html http://www.cnblogs.com/lvkun/archive ...
- 解决MySql报错:1130 - Host 'xxx' is not allowed to connect to this MySQL server的方法
发现问题 使用Navicat连接MySql数据库时,未能成功,提示信息如下图: 这个错误提示已经很明确了,"不允许主机'desktop-teat9ob'连接到此mysql服务器", ...