relative相对定位

偏移设置:left、right、top、bottom 值单位:px

元素的规律:

相对定位元素的规律

  设置相对定位的盒子会相对它原来的位置通过指定偏移,到达新的位置。

  设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响

  设置相对定位的盒子原来的位置会被保留下来

特性:

相对于自己的初始位置来定位

元素位置发生偏移后,他原来的位置会被保留下来

层级提高,可以把标准文档流中的元素及浮动元素盖下边

使用场景:

相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量。

absolute绝对定位

  使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。

  如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位

  绝对定位的元素从标准文档流中脱离,这意味着他们对其他元素的定位不会造成影响。

  元素位置发生偏移后,他原来的位置不会被保留下来

特性:

  绝对定位是相对定位父级的位置来定位,如果没有设置定位父级,则相对浏览器窗口来定位。

  元素位置发生偏移后,原来的位置不会被保留

  层级提高,可以把标准文档流中的元素及浮动元素盖在下边

  设置绝对定位的元素脱离文档流

使用场景:

一般情况下,绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景。

fixed属性值

偏移设置:left、right、top、bottom  值单位:px

  类似绝对定位,不过区别在于定位的基准不是祖先元素,而是浏览器窗口

z-index属性

调整元素定位时重叠层的上下位置

  z-index属性值:整数,默认值为0

设置了position属性时,z-index属性可以设置各元素之间的重叠高低关系

  z-index值大的层位于其值小的层上方

网页元素透明度

属性:

opaction  filter

opaction:x; x值[0 ,1],值越小越透明

filter:alpha(opacity=x); x值[0 ,100],值越小越透明

CSS定位网页中的元素的更多相关文章

  1. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  2. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. css015 定位网页上的元素

    css015 定位网页上的元素 一.   定位属性的功能 1.         四中类型的定位 Position: absolute relative fixed static a. 绝对定位 绝对定 ...

  4. C#获取网页中某个元素的位置,并模拟点击

    我们在开发中,往往要得到网页中某个元素的位置,并且点击它.要模拟一次鼠标点击并不难,只要调用一个API就行了,关键就是怎么样得到这个元素的位置,还有判断是否要滚动滚动条,要滚动多少行能让元素显示出来. ...

  5. CSS在网页中应用的方式_嵌入式

    内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...

  6. 利用python定位网页上的元素

    1. 想对网页上的元素进行操作,首先需要定位到元素. 以百度首页为例: 输入以下代码,打开百度首页: # coding = gbk from selenium import webdriver chr ...

  7. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  8. 定位frame中的元素

    场景 处理frame需要用到2个方法,分别是switch_to_frame(name_or_id_or_frame_element)和switch_to_default_content() 如何理解这 ...

  9. Java中通过Selenium WebDriver定位iframe中的元素

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 问题:有一些元素,无论是通过id或是xpath等等,怎么都定位不到. 分析:这很可能是因为你要定位 ...

随机推荐

  1. eclipse详细安装教程与环境变量设置

    地址:https://blog.csdn.net/q651742112/article/details/73477400 源地址:https://www.cnblogs.com/yeminglong/ ...

  2. Hexo+Github博客最简教程-Dockerfile自动搭建

    闲谈 拿出你的气质,打开你的电脑,借你半小时搭建好属于你的hexo博客,小生用dockerfile自动帮你搭建好:你只需要在你的mac或linux或windows上提前把docker安装好,如何安装不 ...

  3. Flutter环境搭建

    本文介绍mac上搭建Flutter环境 1.Flutter官方提供中国地区镜像地址:https://github.com/flutter/flutter/wiki/Using-Flutter-in-C ...

  4. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  5. 关于Ajax异步请求(实时刷新)

    1.需求:想要做成动态实时刷新获取数据库的值 2.例子 3.代码逻辑: <script type="text/javascript"> var Seconds=1000 ...

  6. __proto__、prototype和原型对象

    一.__proto__ 对象内部存在一个指针,用来指向上一层函数的原型对象.ECMA-262第五版中关这个指针叫[[prototype]],但Firefox.Safari和Chrome在每个对象上都支 ...

  7. Linux命令:pushd

    语法 pushd [-n] [+N | -N | dir] 更改新目录并(或)压栈,或者把栈里的某个目录推到栈顶. 说明 pushd dir # 切换到目标目录dir,并将dir压栈. pushd # ...

  8. salt Rosters

    salt除了支持Master 和Minion方式之外,还支持SSH; SSH方式因为没有minion主动连接master,所以需要维护 roster,提供master可以操作的对象;roster的配置 ...

  9. 如何自定义Django数据库中的字段

    新建完项目之后,想要自定义字段 # 创建一个自定义的字段 class MycharField(models.Field): def __inif__(self, max_lenth, *args, * ...

  10. ActiveMQ安装使用与spring整合配置教程

    https://blog.csdn.net/qq_22075041/article/details/77602996