css中关于定位属性position为fixed的使用介绍

这篇文章主要介绍了关于css中关于定位属性position为fixed的使用介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

当一个div想要定位时,我们第一反应是position属性,而position属性除了默认值外,还有absolute,relative和fixed,下面有个不错的示例,不懂的朋友可以参考下

在html中,当一个p想要定位时,我们第一反应是position属性,而position属性除了默认值外,还有absolute,relative和fixed。当被设置成fixed时,可以通过设置left、right、top、bottom的值来相对于body定位。 

代码: 

.my-fiexd{ position:fixed; height:40px; width:40px; background-color:red; border:0px; }

可是当某个p随着滚动条滚动时而被设置成fixed时(置顶,很多menu都会这样),可能会发生一个小现象(可以说是bug吧)。具体代码就不上了,就说下现象和解决办法吧。 

立即学习“前端免费学习笔记(深入)”;

假如一个高度为100px的页面有一个id为my-fixed的p,my-fixed的高度为20px,滚动条滚动到30px时,my-fixed被添加fiexd属性,那么此时my-fixed就脱离了页面,相对应的页面高度也要减去20px,页面高度为80px,可能正好此时滚动条所能滚动的最大高度已经小于30px,这个时候my-fixed就会一直在添加和不添加fixed之间不停闪烁,最后my-fixed并没有被添加fixed。 

解决办法是,给my-fixed外层添加一个p并设置和my-fixed一样的高度,这样当my-fixed脱离时,页面高度就不会减少,闪烁的现象就能很好的避免 

ps:第一次写博客,文字表达上可能不是很清楚,但大概意思应该是对的,欢迎提问,同时如果有人遇到同样的问题,并有更好的解决办法,请也告诉我

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

css3实现的竖形二级导航

如何使用position:fixed属性让DIV居中

以上就是css中关于定位属性position为fixed的使用介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1610722.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:38:13
下一篇 2025年12月24日 01:38:26

相关推荐

  • CSS 使用Sprites技术实现圆角的效果

    这篇文章主要介绍了关于css 使用sprites技术实现圆角的效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 使用CSS Sprites技术画圆角,简单的讲就是把一个圆做在一张图上,定义4个p,每个p取图的一个角做背景,下面看具体实现方法。 首先来简单说一下什么是Sprites,…

    好文分享 2025年12月24日
    000
  • CSS透明opacity和IE各版本透明度滤镜filter的用法

    css3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持css3的浏览器如何进行透明处理,保持浏览器效果的一致,本篇文章主要介绍了详解css透明opacity和ie各版本透明度滤镜filter的最准确用法,有兴趣的可以了解一下。 CSS3的透明度属性opacity想必大家都已经用…

    好文分享 2025年12月24日
    000
  • css浏览器不兼容原因的分析

    这篇文章主要介绍了关于css浏览器不兼容原因的分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现。 在下不才,归纳几点html编码要素,望能指点各位:1.文字本…

    好文分享 2025年12月24日
    000
  • 关于CSS中权值、层叠和重要性(!important)的分析

    下面为大家带来一篇浅谈css 权值 层叠 重要性(!important)。内容挺不错的,现在就分享给大家,也给大家做个参考。 1、特殊性 权值 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{co…

    好文分享 2025年12月24日
    000
  • 关于CSS中视窗单位和百分比单位的使用

    这篇文章主要介绍了详解css中视窗单位和百分比单位的使用,是css入门学习中的基础知识,需要的朋友可以参考下 视窗(Viewport)单位 视窗(Viewport)单位是相对单位,意味着它们没有客观的尺寸。它们的大小是由视窗(Viewport)大小决定的。下面是四个与视窗(Viewport)有关的单…

    2025年12月24日 好文分享
    000
  • 通过优先级对比验证CSS控制样式的三种方式

    这篇文章主要介绍了关于通过优先级对比验证css控制样式的三种方式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,这里简单介绍下CSS控制样式的三种方式 好了,直入主题,大家都知道,CSS的中文名叫做层…

    2025年12月24日 好文分享
    000
  • 关于CSS实现禁止鼠标点击事件的代码

    这篇文章介绍的是通过纯css实现禁止鼠标点击事件,比起javascript来更加灵活,有需要的可以参考学习。 JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。 event.preventDefault() 该方法将通知 …

    好文分享 2025年12月24日
    000
  • CSS中如何使用负margin值来调整居中位置

    这篇文章主要介绍了css中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下 这或许是最常用的居中方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加…

    2025年12月24日
    000
  • CSS使用盒模型实例

    下面为大家带来一篇css使用盒模型实例分析。内容挺不错的,现在就分享给大家,也给大家做个参考。 盒子是CSS中的基础概念,我们需要使用它来配置元素的外观以及文档的整体布局。 1. 为元素应用内边距 应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距,或者使用 padd…

    2025年12月24日 好文分享
    000
  • 关于CSS制作的三角形和圆形小按钮的代码

    这篇文章主要介绍了一波css制作的三角形和圆形小按钮示例,都采用了灰色的常见按钮样式设计,需要的朋友可以参考下 参考了天猫、微博等网站的做法,用纯html和css实现,效果还是不错的。以下是成果,兼容主流浏览器,包括ie6。 *{margin:0; padding:0; list-style:non…

    2025年12月24日
    000
  • 如何使用position:fixed属性让DIV居中

    下面与大家分享下使用position:fixed属性让div居中的关键代码是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto,感兴趣的朋友可以参考下哈  关键代码是:#topmenu_ke…

    好文分享 2025年12月24日
    000
  • 关于CSS 平级和儿子级样式的写法

    这篇文章主要与大家分享了css 平级和儿子级样式的写法,比较适合初学者,正在学习css 的朋友可以参考下 input:checked+ol:这个是讲当inoput 拥有了checked后它平级的OL拥有的样式。 input:checked+ol>li:中的大于是指当inoput 拥有了chec…

    好文分享 2025年12月24日
    000
  • CSS制作图形变形弹出的效果

    这篇文章主要介绍了一个css制作图形变形弹出效果的示例分享,弹出窗的大小可以使用jquery来修改,需要的朋友可以参考下 弹出窗体是网页常用的一个交互设计,在这个注重交互动画体验的时代,网页弹窗也可以来点新鲜的点子,比如今天分享的CSS 变形Modal Window。 当用户点击按钮时,按钮将会变成…

    2025年12月24日
    000
  • 对于CSS浮动float和定位position的解析

    本文针对css浮动float、定位position进行学习理解,通过实例帮助大家掌握css浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况。当float : left;时,元素就会向其父元素…

    2025年12月24日 好文分享
    000
  • 使用CSS3来实现滚动视差效果

    这篇文章主要介绍了使用css3来实现滚动视差效果的教程,主要使用到了background-attachment属性,需要的朋友可以参考下 “视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果,它其实就是利用图片形成不同的层,分别以不同的速度,不同的方向移动产生的…

    好文分享 2025年12月24日
    000
  • CSS的table-layout属性的用法

    今天给大家详细说一下table-layout属性的用法, tablelayout属性用来显示表格单元格、行、列的算法规则。本文通过实例代码给大家介绍了css的table-layout属性的用法,需要的朋友参考下吧 前言: 今天来和大家详细说一下table-layout属性的用法。   /*eg:设置…

    2025年12月24日
    000
  • CSS实现有立体感的横向按钮式菜单效果

    这篇文章主要为大家介绍了css实现有立体感的横向按钮式菜单效果代码,可实现鼠标滑过呈现按钮按下的效果,具有极强的3d立体效果,涉及css基于hover属性的border边框设置技巧,需要的朋友可以参考下 本文实例讲述了CSS实现有立体感的横向按钮式菜单效果代码。分享给大家供大家参考。具体如下: 这是…

    好文分享 2025年12月24日
    000
  • 关于css属性的选择对动画性能的影响

    下面为大家带来一篇深入理解css属性的选择对动画性能的影响。内容挺不错的,现在分享给大家,也给大家做个参考。 现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画。说到css动画,主流的情况也就无非这两大类:位移和形变。而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首…

    2025年12月24日 好文分享
    000
  • CSS实现radio和checkbox的 实现效果

    这篇文章主要介绍了纯css实现radio和checkbox实现效果示例的相关资料,内容挺不错的,现在分享给大家,也给大家做个参考。 radio-and-checkbox 纯CSS实现radio和checkbox实现效果 reset-radio 在开发PC端的项目时,经常会用到radio和checkb…

    好文分享 2025年12月24日
    000
  • 关于CSS实现漂亮的下拉导航效果

    这篇文章主要为大家介绍了纯CSS实现漂亮的下拉导航效果代码,通过简单的css样式设置及针对鼠标事件的响应实现下拉菜单导航效果,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下: 这是一款纯CSS完成的下拉导航代码,蓝色经典色调,…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信