CSS: 绝对定位fixed
属性介绍
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
案例
元素顶部固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding-left: 100px;
padding-top: 100px;
}
header {
/* 固定定位 */
position: fixed;
left: 0px;
top: 0px;
right: 0px;
height: 60px;
background: white;
border-bottom: solid 5px blueviolet;
box-shadow: 0 5px 10px #555;
}
main{
width: 400px;
height: 3000px;
background: #333;
}
</style>
</head>
<body>
<main></main>
<header></header>
</body>
</html>
效果展示
CSS: 绝对定位fixed的更多相关文章
- css绝对定位元素实现居中的几个方法
一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...
- CSS绝对定位详解
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.直线电机生产厂家 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素 ...
- CSS:position:fixed使用(转)
position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...
- CSS 绝对定位和相对定位
CSS定位属性:一个定位属性,需配合四个定位坐标,实现定位 固定定位fixed 说明: 1.固定定位是相对于"浏览器窗口" 2.如果只设置了定位属性,未指定定位坐标时,元素将停留在 ...
- css绝对定位如何在不同分辨率下的电脑正常显示定位位置？
有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...
- 深入理解CSS绝对定位
× 目录 [1]定义 [2]特性 [3]display[4]clip[5]静态位置[6]overflow 前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定 ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- css绝对定位、相对定位和文档流的那些事
前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
- 深入理解CSS绝对定位absolute
前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定定位,绝对定位在实际中应用频率更高.应用场景更广泛.本文将介绍使用绝对定位时的具体细节 定义 当元素绝对定 ...
- css绝对定位
绝对定位是我们在使用css时经常使用到的一种布局方式,下面说一下什么是绝对定位. 绝对定位使用position:absolute来定义,首先,要理解的是使用了绝对定位的元素它会脱离文档流,所谓脱离文档 ...
随机推荐
- 为什么 Go for-range 的 value 值地址每次都一样？
原文链接: 为什么 Go for-range 的 value 值地址每次都一样? 循环语句是一种常用的控制结构,在 Go 语言中,除了 for 关键字以外,还有一个 range 关键字,可以使用 fo ...
- node可以用nvm快速切换版本，golang如何快速切换版本？用gvm就行。
使用 gvm 可以带来以下好处: 快速切换 Golang 版本,方便进行版本测试和开发: 可以在多个项目中同时使用不同版本的 Golang 包和工具,避免冲突: 可以通过 gvm 管理不同版本的 Go ...
- 2020-12-12：现场写代码，把CPU打满，java和go都行，并解释为什么。
福哥答案2020-12-12: 现在的电脑一般是多核的,单个for循环cpu是不会打满的. 我的电脑是四核八线程的,不管是java还是go,6个for循环就能把cpu打满,4个和5个cpu打不满. 为 ...
- 2022-10-31：以下go语言代码输出什么？A：map[]；B：nil；C：Panic；D：编译错误。 package main import “fmt“ func main() {
2022-10-31:以下go语言代码输出什么?A:map[]:B:nil:C:Panic:D:编译错误. package main import "fmt" func main( ...
- 2022-07-11：给定n位长的数字字符串和正数k，求该子符串能被k整除的子串个数。 (n＜=1000，k＜=100)。 来自微众。4.11笔试。
2022-07-11:给定n位长的数字字符串和正数k,求该子符串能被k整除的子串个数. (n<=1000,k<=100). 来自微众.4.11笔试. 答案2022-07-11: 动态规划. ...
- 2021-03-18：给定一个字符串str，只由‘X’和‘.’两种字符构成。‘X’表示墙，不能放灯，也不需要点亮，‘.’表示居民点，可以放灯，需要点亮。如果灯放在i位置，可以让i-1，i和i+1三个位置被点亮。返回如果点亮str中所有需要点亮的位置，至少需要几盏灯。
2021-03-18:给定一个字符串str,只由'X'和'.'两种字符构成.'X'表示墙,不能放灯,也不需要点亮,'.'表示居民点,可以放灯,需要点亮.如果灯放在i位置,可以让i-1,i和i+1三个位 ...
- 2022-03-12：k8s如何搭建gogs+drone实现自动化部署cicd，yaml如何写？
2022-03-12:k8s如何搭建gogs+drone实现自动化部署cicd,yaml如何写? 答案2022-03-12: 需要安装docker和k3s,见 docker和k3s,k3s不需要依赖d ...
- linux中使用jenkins自动部署前端工程
1.去年在自己的服务器上安装了jenkins,说用来自己研究一下jenkins自动化部署前端项目,jenkins安装好了,可是一直没管,最近终于研究了一下使用jenkins自动化部署,以此记录下来. ...
- Create Vite App 支持 OpenTiny 啦🎉
大家好,我是 Kagol,个人公众号:前端开源星球. 一个月前,日日自新写了一篇介绍 Create Vite App 开源项目的文章: 基于vite 4.x 快速搭建开箱即用,高度可定制化模版脚手架 ...
- 如何使用 Megatron-LM 训练语言模型
在 PyTorch 中训练大语言模型不仅仅是写一个训练循环这么简单.我们通常需要将模型分布在多个设备上,并使用许多优化技术以实现稳定高效的训练.Hugging Face Accelerate 的创建 ...