博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div+css定位position详解
阅读量:7113 次
发布时间:2019-06-28

本文共 686 字,大约阅读时间需要 2 分钟。

 

  1. 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来。

    首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么?

    看如下代码:

  2. 2

    2.预览效果,现在是三个并列的div

  3. 3

    3.给中间的div增加定位属性:position:relative; top:10px; left:10px;

  4. 4

    4.预览效果:

  5. 5

    5.很明显它现在移动的参照物就是它原来所占据的位置

        注意看代码top:10px;left10px;

        也就是相对于顶部下移10px,相对于左边,向右移动10px;

        注意:位置属性 top right left bottom 只能引用相邻的两个边,不能只用上下,或者只用左右。

    现在把position:relative; 修改为absolute;

  6. 6

    6.发现预览效果不明显,那么修改top:30px;left30px;

    现在的预览效果如下:

  7. 7

    7.发现中间的div脱离了文档流,右侧的和左侧div挨着了,现在中间的div的位置是从浏览器的左上角开始计算位置即向下移动30像素,向右移动30像素。

        现在就涉及到一个层级的关系,设置div的z-index属性,数值越大的,层显示在最上边,可以自行试试。

     

    http://blog.sina.com.cn/u/2144983995

转载于:https://www.cnblogs.com/zhoupengyi/p/6046993.html

你可能感兴趣的文章
Halcon学习之三:有关图像通道的函数(R是三通道,B是1通道,G二通道),排列顺序BGR...
查看>>
python标准库介绍——19 mmap 模块详解
查看>>
行为型模型 状态模式
查看>>
转: wireshark的使用说明
查看>>
PHP7 学习笔记(九)phpsize动态编译openssl扩展 (微信公众平台)
查看>>
jsonp的原理
查看>>
来手撸一个小小小小小"3D引擎"
查看>>
Oracle创建新用户并将某一用户的表导进来
查看>>
利用神经网络算法的C#手写数字识别
查看>>
DIY固件系列教程——实现开机LOGO三屏动画的完全替换【转】
查看>>
吃晚饭,不要晚于这个时间
查看>>
用工具写博客
查看>>
sqlsever 科学计数法 转标准值
查看>>
函数func_splitString:将字符串按指定方式分割,获取指定位置的数
查看>>
C++编程基础练习
查看>>
Python实现快速排序
查看>>
蓝牙4.0BLE抓包(二) – 广播包解析
查看>>
laravel创建新的提交数据
查看>>
FineBI学习系列之FineBI的ETL处理(图文详解)
查看>>
Java 8 新特性
查看>>