定位属性position小结

1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位。相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置。

2.子元素为relative(相对的)时,不参考父元素的位置,子元素不会脱离文档流,子元素参考自身位置进行定位。

3.子元素为absolute(绝对的)时,当父元素为relative或absolute时,此时父元素有位置信息,子元素会脱离文档流,参考父元素的位置。当父元素为static时,子元素会脱离文档流,子元素参考body原点进行定位。

定位属性position的更多相关文章

  1. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  2. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  3. 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  4. CSS学习笔记:定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  5. CSS - 定位属性position使用详解(static、relative、fixed、absolute)

    position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...

  6. css 定位属性position的使用方法实例-----一个层叠窗口

    运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style ty ...

  7. 关于CSS定位属性 position 的使用

    CSS中一般通过浮动和定位来对标签进行位置操作.下面我们来讨论一下定位的用法和需要注意的地方. 1.首先,说一下position的几个属性值 (1)none属性值,这个是定义不进行定位,默认为不定位, ...

  8. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  9. CSS定位属性

                  定位属性                                                              position属性 1.      s ...

随机推荐

  1. 【原创】大叔问题定位分享(17)spark查orc格式数据偶尔报错NullPointerException

    spark查orc格式的数据有时会报这个错 Caused by: java.lang.NullPointerException at org.apache.hadoop.hive.ql.io.orc. ...

  2. win10+caffe+GPU

    由于学习需要,决定安装caffe,之前用的都是基于theano的keras.听说win下caffe很难配置,经过一个下午和晚上的配置终于成功,以此记录. 我的电脑:win10 64位,N卡GTX950 ...

  3. add web server(nginx+apache)

    #!/bin/bash # # Web Server Install Script # Last Updated 2012.09.24 # ##### modify by WanJie 2012.09 ...

  4. swiper2 swiper-slide 之间的间距调整

    1.在css中调整间距(我的这个是一行显示三个) swiper-slide-active 可以对这个类进行操作 这个类是显示在页面上的第一个元素 2.设置js //热门新闻 swiper var ne ...

  5. element ui table单选框点击全选问题

    <template slot-scope="scope"> <el-radio-group v-model="scope.row.HandleState ...

  6. 蒙特卡诺近似与PBM

    介绍蒙特卡诺近似的例子代码 #include<fstream> #include<iostream> #include<cstdlib> #include<c ...

  7. matplotlib注解-【老鱼学matplotlib】

    本节讲述在图片中添加注解. 直接上代码: import numpy as np import pandas as pd import matplotlib.pyplot as plt # 生成x轴上的 ...

  8. Nginx服务器中的Socket切分,需要的朋友可以参考下

    NGINX发布的1.9.1版本引入了一个新的特性:允许使用SO_REUSEPORT套接字选项,该选项在许多操作系统的新版本中是可用的,包括DragonFly BSD和Linux(内核版本3.9及以后) ...

  9. Failed to start component [StandardEngine [Catalina].StandardHost[localhost].StandardContext[/项目名]]

    问题: 最近几天在做一个小项目,今天中午本来想启动tomcat打开看看项目的,没想到项目突然无法打开,页面总是显示404 tomcat报错如下:Failed to start component [S ...

  10. 《团队作业第一周》五小福团队作业——UNO

    <团队作业第一周>团队作业--UNO 一.团队展示 队员学号 队名:五小福 (真是个红红火火恍恍惚惚的队名)> 拟作的团队项目描述 基于安卓开发的有趣味性的UNO纸牌小游戏 队员风采 ...