css 相对绝对定位
用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值:static、fixed、absolute和relative,
overflow:hidden;的设置会影响z-index失效
后面两个在布局中的定位里是经常用到的,顾名思义,
absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。
ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。
但是,怎么个绝对法,又怎么个相对法呢?
以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:
1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。
2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。
在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。
css 相对绝对定位的更多相关文章
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- cordova 导致css中绝对定位top:0会被顶到视图之外
IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...
- CSS的绝对定位和相对定位
css定位标签position包括两个值:relative(相对定位)和absolute(绝对定位),position样式一般都是和top.bottom.left.right一起使用来确定一个标签的位 ...
- css的绝对定位
假设绝对定位的元素的id为absoluteDiv. 当包含absoluteDiv的块中没有设置position:relative时, absoluteDiv会相对于浏览器(window.top)定位. ...
- CSS中绝对定位依据谁进行定位?
结论 绝对定位的top等的依据元素需满足3个条件: 已定位(position:relative/fixed/absolute) 最近的 祖辈元素(一定是祖辈元素不是同辈元素) 说明 一般会为body设 ...
- CSS:绝对定位布局案例 position布局实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...
- 【css】绝对定位的元素在 ie6 下不显示
问题描述: 在 ie6 中如果一个浮动元素与绝对定位元素相邻的话,在某些情况下绝对定位元素将会消失. 产生原因: 只有当绝对定位元素的邻近浮动元素的宽度大于父层宽度减 3 时(即如果父层宽度是 300 ...
随机推荐
- day17 内置函数
一.内置函数接下来,我们就一起来看看python里的内置函数 分类图 1.作用域函数 基于字典的形式获取局部变量和全局变量 globals()——获取全局变量的字典 locals()——获取执行本方法 ...
- 第一章----python简介
1.python简介 定义:python是一种计算机程序设计语言,是一种相当高级的语言,是用来编写应用程序的高级编程语言: 特点:优势:简单易用:提供了非常完善的基础代码库:优雅,明确,简单.劣势 : ...
- Type Group(类型组)
在 APAP 程序开发中, 经常需要定义一些常量或变量, 而且可能存在多个程序中需要用到的类似的变量或结构体, SAP 提供了类型组, 允许用户建立一些公用的对象, 允许在不同的程序中调用, 这样不但 ...
- Android无线测试之—UiAutomator UiDevice API介绍六
一.灭屏和唤醒屏幕相关知识: 1)灭屏:按电源键将屏幕熄灭 2)唤醒屏幕:在灭屏状态下按电源键唤醒屏幕 二.灭屏与唤屏相关的API: 返回值 方法名 描述 void wakeUp() 模拟按电源键,如 ...
- azure iothub create-device-identity样例报错: unable to find valid certification path ,及iothub-explorer Error: CERT_UNTRUSTED
https://docs.microsoft.com/zh-cn/azure/iot-hub/iot-hub-java-java-getstarted 在IDEA中执行上述的代码,会出现下面的报错信息 ...
- PHP+MySQL:测试连接+基本DB操作
PHP使用MySQL,从连接.创建.到结果显示 <?php //连接MySQL测试 $db = mysql_connect("localhost","root&qu ...
- 回溯法——最大团问题(Maximum Clique Problem, MCP)
概述: 最大团问题(Maximum Clique Problem, MCP)是图论中一个经典的组合优化问题,也是一类NP完全问题.最大团问题又称为最大独立集问题(Maximum Independent ...
- [转]libevent 环境配置
libevent 据说是IO复用的好东西.所以今天来耍耍. 1. 从官网下载源代码:http://libevent.org/,最新的版本已达到2.0. 2. 先把ubuntu系统自带的libevent ...
- 160816、webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- Cookies with curl the command line tool
w https://curl.haxx.se/docs/http-cookies.html curl has a full cookie "engine" built in. If ...