CSS——固定定位

最新推荐文章于 2024-09-03 09:26:33 发布
最新推荐文章于 2024-09-03 09:26:33 发布
阅读量156 收藏
点赞数
分类专栏： 前端 文章标签： css html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62379761/article/details/130301361
版权

1.介绍：死心眼型定位，相对于浏览器进行定位移动

2.代码：position:fixed;

3.特点：

1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置一已经脱标

4.应用场景：让盒子固定在屏幕中的某个位置

褚睿睿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS——固定定位和Z-index值
mintsolace的博客
04-22 1149
固定定位 就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。 .backtop{ position: fixed; width: 100px; height: 100px; background-color: gray; bottom: 100px; right: 30px; text-align: center; line-heig...
css固定定位
m0_47354330的博客
03-06 596
请将html模块类为"box"的div元素固定在视口的左上角。 <html> <head> <meta charset=utf-8> <style type="text/css"> .box { width: 100px; height: 100px; /*补全代码*/
css固定定位的代码,CSS——相对定位、绝对定位、固定定位(示例代码)
weixin_30460749的博客
08-04 4301
相对定位：position:relative当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流，除非设置其z-index值为负值。并且我们发现当相对定位元素进行位移后，表面来看已经脱离了文本流，但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高。绝对定位：position:absolute相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局...
CSS定位——相对定位，绝对定位以及固定定位，z-index（图层）
m0_67737085的博客
10-21 1160
- 相对于自己原来的位置偏移 -->{margin;padding;font-size;;}#p1{;border;position;/*相对定位：上下左右*/top;left;}#p2{;border;}#p3{;border;}
CSS——fixed 固定定位相对于父容器
05-19
如果想要实现相对于父容器的固定定位，可以将父容器的定位属性设置为relative，再将子元素的定位属性设置为fixed。这样子元素的定位将相对于父容器进行定位。下面是示例代码： HTML部分： ``` 我是固定定位的...
CSS定位——静态定位、绝对定位、相对定位、固定定位、粘性定位
qq_43623147的博客
12-12 1272
定位 一、为什么需要定位？ 定位可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。标准流或浮动都无法快速实现。 二、定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 1. 定位模式 用于指定一个元素在文档中的定位方式。 通过CSS的position属性来设置，有四个值 值 语义 static 静态定位.
CSS——position定位 static、relative、absolute、fixed、sticky
LT的博客
06-02 553
position定位 我们常常需要使用定位模型达到布局的目的。 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 接下来介绍position的五种定位模型。 一、static自然模型 .box{ position:static; } static——静态定位、常规定位、自然定位；默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, rig
CSS学习9[重点]--盒子模型大小、布局稳定性、CSS3盒模型以及盒子阴影
qq_54641174的博客
09-02 1556
盒子模型--内容高宽，盒子布局，盒子阴影
前端代码注释风格 - CSS篇
yangguangxiadewo的专栏
09-02 1212
本文基于《阿里巴巴CSS编程规约》、stylelint rules进行编写，涉及预编译语言（Sass、Less）的编码风格和最佳实践。
html,css学习记录
2301_79347603的博客
09-01 2158
html,css学习记录htmlcss盒子模型 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mykingdom</title> <link
前端知识HTML&CSS
w13114的博客
08-31 1336
前端知识
css之雪碧图（精灵图）
qq_55961367的博客
09-02 553
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。听到雪碧图是不是跟我一样，啥？以下是本人自己写的例子，大图的图片是在百度找的。
Cesium加载高速公路样式线图层和利用CSS撰写高速公路样式
警警的博客
09-02 1470
Cesium加载高速公路样式线图层和利用CSS撰写高速公路样式,css的position：absolute和relative
css基本概述
最新发布
是程序喵呀
09-03 1259
• CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于定义HTML、XML等文档中如何呈现页面的样式和布局的标准语言。通过CSS可以控制网页的字体、颜色、大小、间距、背景等各种样式，从而实现对网页内容的精细控制。与HTML相比，CSS具有更高的灵活性和可扩展性，可以将网页的样式和内容分离开来，使得网页结构更加清晰、易于维护和修改。• 作用: 负责美化页面(相当于装修)盒子模型是指在网页设计中，将每个 HTML 元素看作是一个矩形的。
前端面试题总结（HTML篇和CSS篇）
hyx_1225的博客
08-31 2582
BFC是一个独立渲染区域，它丝毫不会影响到外部元素BFC特性BFC内部元素是垂直排列的同一个BFC下margin会重叠计算BFC高度时会算上浮动元素BFC不会影响到外部元素BFC区域不会与float元素重叠如何创建BFCposition设为absolute或fixedfloat不为noneoverflow设置为hidden、autodisplay设置为inline-block或者inline-table或flexBFC的作用：解决margin的重叠问题。
CSS中响应式设计
业精于勤荒于嬉，行成于思毁于随
09-02 457
三个重要方面:媒体查询：CSS语法，根据浏览器特性，提供规则。流式布局：使用em或者百分比等相对单位设定页面总体宽度，布局随屏幕大小而缩放。弹性图片：相对单位确保图片再大也不会超过容器。媒体查询。
网站开发：HTML + CSS - CSS选择器
qq_51222843的博客
09-03 1297
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能，使开发者能够创建美观且功能丰富的用户界面。提供了丰富的功能来控制网页的外观和布局，增强用户体验，并支持现代 Web 开发的最佳实践。通过合理使用 CSS，可以创建视觉上引人入胜、功能丰富、易于维护的 Web 应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值