css如何实现固定定位?(代码实例)

本章用实例给大家介绍css如何实现固定定位,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

把box2设为固定定位:

          定位           .box1{        width:100px;         height: 100px;        background-color: rgb(184, 208, 162);      }      .box2{            width:100px;            height: 100px;            background-color: rgb(231, 223, 143);            position:fixed;            left: 100px;            top:  100px;      }      .box3{        width:100px;        height: 100px;        background-color: rgb(188, 211, 213);      }      span{        background-color: rgb(209, 198, 209);      }           
span元素

输出:

固定定位永远都会相对于浏览器窗口进行定位;

固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动;

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

3.png

以上就是css如何实现固定定位?(代码实例)的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 02:38:46
下一篇 2025年12月24日 02:38:57

相关推荐

  • CSS如何实现单行和多行文本溢出显示省略号

    在页面布局时,经常会遇到内容超出了盒子的情况,这个时候我们可以设置溢出的部分隐藏,还可以设置溢出的部分被截断,但一般情况下都是用溢出的部分显示省略号。这篇文章就和大家讲讲css如何实现单行文本和多行文本溢出显示省略号,有需要的朋友可以看看,希望对你有帮助。 如果实现单行文本的溢出显示省略号同学们应该…

    好文分享 2025年12月24日
    000
  • 如何使用纯CSS实现蚊香燃烧的效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/front-end-d…

    2025年12月24日
    000
  • 深入理解CSS中线性渐变linear-gradient属性

    随着互联网的发展,人们不仅对网页的功能要求高,而且对页面的颜值要求也越来越高,比如页面颜色不再使用单一的颜色,会使用多种颜色混合,让页面更加美观,从而吸引更多的用户。这篇文章就和大家分享css线性渐变 linear-gradient() 函数的使用方法,包括linear-gradient() 属性,…

    2025年12月24日
    000
  • css文本单行超出和多行超出省略号分别如何实现?

    有时候在设计网页的时候可能会遇到文本太长而导致页面不太美观,那么如何来解决这个问题呢?本篇文章将给大家来介绍关于css文本单行超出省略号以及多行文本超出省略号的实现方法。 首先我们来看一看css实现单行文本超出省略号的方法。 css实现单行文本的溢出显示省略号应该用text-overflow:ell…

    2025年12月24日
    000
  • 图文详解CSS clear:both清除浮动的运用

    当我们用div+css进行页面布局时,经常会出现一些意想不到的结果,比如画面排版乱了,没有呈现我们想要的样式,又或者设置一些属性不起作用,这些诡异的事情都非常让人头疼。其实,这些都出乎意料的事情是由浮动float引起的,它也是有解决办法的。这篇文章就给大家介绍如何用clear:both清除浮动,从而…

    2025年12月24日
    000
  • 如何巧妙运用CSS clear:both清除浮动(附代码)

    在页面布局时,经常会使用float浮动,也必然会清除浮动,这篇文章就和大家讲讲如何巧妙运用clear:both清除浮动,有需要的朋友可以参考一下,希望对你有帮助! 我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6…

    好文分享 2025年12月24日
    000
  • css什么是内边距?css内边距的设置方法(实例)

    在前端开发中经常会使用css盒子模型,一般我们会通过css设置width(宽度),padding(内边距),margin(外边距)等属性可以调节整个盒子的大小。本章就给大家介绍css盒子模型的内边距(padding)属性的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 内边…

    2025年12月24日 好文分享
    000
  • css负外边距是什么?css负外边距的作用(详解)

    本章给大家带来css负外边距是什么?css负外边距的作用(详解),带大家看看css负外边距有什么作用。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 负边距介绍 负边距的使用如下: #content {margin-left:-100px;} 负边距通常在小范围使用。但是接下来你会看…

    2025年12月24日
    000
  • css实现滚动文字的实例代码

    本篇文章给大家带来的内容是关于css实现滚动文字的实例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果图 图片描述:箭头指向部分,以白色为背景,从左向右滚动。(不适用于IE) 代码 html 例子:滚动的文字,我是滚动的文字 CSS .box { height: auto;…

    2025年12月24日
    000
  • 如何使用纯CSS实现抽象的水波荡漾的动画(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现抽象的水波荡漾的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…

    2025年12月24日
    000
  • 深入理解CSS中的rem以及移动端的布局方法

     相信大家对px已经很熟悉了,但是提到rem有些人就不知道了。今天这篇文章主要介绍什么是rem,em,以及他们在移动端中的布局方法,有需要的可以参考一下,希望对你有帮助。 一、rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页…

    好文分享 2025年12月24日
    000
  • css中clip属性是什么?clip:rect()制作圆形进度条动画(代码实例)

    本章给大家带来css中clip属性是什么?clip:rect()制作圆形进度条动画(代码实例),给大家介绍了什么是clip属性,clip:rec()的用法,最后通过一个实例让大家更直观的了解clip:rect()。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、css什么是cli…

    2025年12月24日 好文分享
    000
  • css如何使用特定属性选择器lang?使用介绍(详解)

    css 2 引入了属性选择器,属性选择器可以根据元素的属性及属性值来选择元素。本章就给大家介绍css特定属性选择器lang的使用方法(详解)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 css :lang选择器定义用法介绍 lang 向带有指定 lang 属性开始的元素添加样式。…

    2025年12月24日
    000
  • css不透明度opacity属性详解

    本章给大家带来css不透明度opacity详解,让大家了解什么是opacity属性,opacity属性的一些特性。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、opacity属性 1、opacity 习惯上说“透明度”,其实应该叫“不透明度”。opacity 意思:不透明,而背…

    2025年12月24日 好文分享
    000
  • 如何用CSS修改浏览器滚动条的样式(实例详解)

    随着互联网的发展,人们对页面的要求越来越高,不只是功能好用,而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生,当自带的一些滚动条无法满足我们的审美时,你知道如何用css修改浏览器滚动条的样式吗?今天就给大家介绍如何设置div滚动条样式。有需要的小伙伴可以参考一下。 我们在自定义滚动条样式前,首…

    2025年12月24日
    000
  • css如何设置背景图片?background属性添加背景图片

    在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 推荐手册:CSS在线手册 css怎样设置背景图片? css background…

    2025年12月24日 好文分享
    000
  • css文字如何竖排显示?css文字竖排显示的方法

    有时候网页中的文字因为特别要求不能横向显示,这时候所需要的就是让文字来竖排显示,那么,网页中如何让文字竖排显示呢?接下来本篇文章将介绍css实现文字竖排显示的方法。 css文字竖排显示的方法一: 使用writing-mode属性 语法:writing-mode:lr-tb或writing-mode:…

    2025年12月24日 好文分享
    000
  • CSS虚线样式的制作方法及虚线样式的运用实例

    在页面布局时,为了呈现一定的效果,经常需要使用css虚线样式,但是很多人新手对css虚线样式还比较陌生,这篇文章就和大家讲讲,如何使用cssborder属性制作虚线样式,以及css虚线样式的一些运用实例。比如:css虚线边框的运用,css虚线下边框的运用,一条虚线的运用等等。有需要的小伙伴可以参考一…

    2025年12月24日 好文分享
    000
  • css溢出机制是什么?css溢出的详细介绍(附实例)

    本篇文章给大家带来的内容是关于css溢出机制是什么?css溢出的详细介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 为什么需要深入学习CSS溢出机制? 在实际开发的过程中,内容溢出是经常见到的。如果不深入了解这个机制,你经常会碰到这样的问题:为什么这个元素没有受到祖先…

    2025年12月24日 好文分享
    000
  • CSS怎么实现底部对齐?css实现底部对齐的三种方法

    本篇文章给大家带来的内容是关于css怎么实现底部对齐?css实现底部对齐的三种方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1、红色区域数据需要倒排(即从底部开始数,数字为1、2、3、4、5)…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信