热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

position定位属性值:

本文主要介绍关于css3,css,前端的知识点,对【position定位属性值】和【】有兴趣的朋友可以看下由【酱芈芈】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的面试题相关技术问题。pos

本文主要介绍关于css3,css,前端的知识点,对【position定位属性值】和【】有兴趣的朋友可以看下由【酱芈芈】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的面试题相关技术问题。

position的含义是指定位类型,取值类型可以有:static、relative、absolute、
fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。
1、position:static
static(没有定位)是position的默认值,元素设置相对于原本位置的定位,
元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受
到影响
2、position:relative
relative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响
3、position:absolute
absolute(绝对定位)是指给元素设置绝对的定位,相对定位的对象可以分为两种情况:
1)、设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者
absolute,则这时元素的定位对象为此已设置position属性的祖先元素
2)、如果并没有设置了position属性的祖先元素,则此时相对于body进行定位
4、position:fixed
可以简单说fixed是特殊版的absolute,fixed元素总是相对于body定位的。
5、inherit
继承父元素的position属性,但需要注意的是IE8已及往前的版本都不支持inherit属性。
6、sticky(黏性定位,吸顶效果)
position 属性中最有意思的就是sticky了,设置了sticky的元素,在屏幕范围
(viewport)时该元素的位置并不受到定位影响(设置top、left等属性无效),
当该元素的位置将要移除偏移范围时,定位又会变成fixed,根据设置的left、top等属性固定位置的效果


 

  

  





  

本文《position定位属性值》版权归酱芈芈所有,引用position定位属性值需遵循CC 4.0 BY-SA版权协议。


推荐阅读
  • 本文深入探讨了Java多线程环境下的同步机制及其应用,重点介绍了`synchronized`关键字的使用方法和原理。`synchronized`关键字主要用于确保多个线程在访问共享资源时的互斥性和原子性。通过具体示例,如在一个类中使用`synchronized`修饰方法,展示了如何实现线程安全的代码块。此外,文章还讨论了`ReentrantLock`等其他同步工具的优缺点,并提供了实际应用场景中的最佳实践。 ... [详细]
  • Unity3D 中 AsyncOperation 实现异步场景加载及进度显示优化技巧
    在Unity3D中,通过使用`AsyncOperation`可以实现高效的异步场景加载,并结合进度条显示来提升用户体验。本文详细介绍了如何利用`AsyncOperation`进行异步加载,并提供了优化技巧,包括进度条的动态更新和加载过程中的性能优化方法。此外,还探讨了如何处理加载过程中可能出现的异常情况,确保加载过程的稳定性和可靠性。 ... [详细]
  • 在《ChartData类详解》一文中,我们将深入探讨 MPAndroidChart 中的 ChartData 类。本文将详细介绍如何设置图表颜色(Setting Colors)以及如何格式化数据值(Formatting Data Values),通过 ValueFormatter 的使用来提升图表的可读性和美观度。此外,我们还将介绍一些高级配置选项,帮助开发者更好地定制和优化图表展示效果。 ... [详细]
  • 在使用 Qt 进行 YUV420 图像渲染时,由于 Qt 本身不支持直接绘制 YUV 数据,因此需要借助 QOpenGLWidget 和 OpenGL 技术来实现。通过继承 QOpenGLWidget 类并重写其绘图方法,可以利用 GPU 的高效渲染能力,实现高质量的 YUV420 图像显示。此外,这种方法还能显著提高图像处理的性能和流畅性。 ... [详细]
  • 在Java Web服务开发中,Apache CXF 和 Axis2 是两个广泛使用的框架。CXF 由于其与 Spring 框架的无缝集成能力,以及更简便的部署方式,成为了许多开发者的首选。本文将详细介绍如何使用 CXF 框架进行 Web 服务的开发,包括环境搭建、服务发布和客户端调用等关键步骤,为开发者提供一个全面的实践指南。 ... [详细]
  • 深入理解排序算法:集合 1(编程语言中的高效排序工具) ... [详细]
  • Isthereanywaytostylethislistusingpurecsssoallelementsabovemycursorwillbehighlight ... [详细]
  • 一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • 这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读 ... [详细]
  • 前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • Bootstrapfontnotloadingcorrectlyglyphicons-halflings-regular.woff2.引导字体没有正确加载符号-halflingr ... [详细]
  • 可能我们在看一些网页的源码时会发现自己从来没见过的属性或用法今天我就来总结一下CSS3的冷知识样式计算在CSS中也可以进行简单的计算通过calc函数可以实现这样还可以使我们的 ... [详细]
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)
    过往项目2018年9月份项目汇总(共26个项目)2018年8月份项目汇总(共29个项目)2018年7月份项目汇总(共29个项目)2018年6月份项目汇总(共27个项目)2018年5 ... [详细]
  • 1.CSS3透明度渐变(从左到右)#grad{background:-webkit-linear-gradient(left,rgba(198,226,255,1),rgba(19 ... [详细]
  • 1、给边框加上圆角及阴影,如下代码:<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ... [详细]
author-avatar
邪冫主_70139
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有