CSS之定位（固定定位）

固定定位：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>固定定位</title><style>body{font-size: 60px;height: 2000px;}.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{width: 200px;height: 200px;background-color: orange;/*固定定位：(脱离文档流)-将元素的position属性设置为fixed则开启了元素的固定定位-固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样唯一不同的是固定定位永远参照于浏览器的视口进行定位*/position: fixed;left: 0;top: 0;}.box3{width: 200px;height: 200px;background-color: yellow;}.box4{width: 400px;height: 400px;background-color: tomato;}.box5{width: 300px;height: 300px;background-color: aliceblue;}</style></head><body><div class="box1">1</div><div class="box4">4<div class="box5">5<div class="box2">2</div></div></div><div class="box3">3</div></body>
</html>

CSS之定位（固定定位）相关推荐

HTML四种定位-固定定位
固定定位 1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset=" ...
css加了固定定位就不显示内容_前端开发必备，学好”定位“向菜鸟说拜拜
众所周知,前端CSS中,盒模型.浮动.定位为必须掌握的三座大山. 今天就来聊聊定位的那些事. 定位是什么? 先来看看哪些场景用到定位,如下图所示,凡是有盒子压住另一个盒子的地方都可定位,因为用浮动做不 ...
CSS绝对定位模拟固定定位(absolute模拟fixed)
滚动条的产生滚动条在谁身上初始包含块 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
【前端】CSS中的相对定位，绝对定位和固定定位
相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置. 相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: position默认值为stat ...
css定位详解（相对定位、绝对定位和固定定位）
文章目录一.什么是定位? 二.各个属性值的作用 1.相对定位 2.绝对定位 3.静态定位 4.固定定位三.相对和绝对定位 1.相对定位 2.绝对定位 3.相对定位和绝对定位 (1)相对定位 (2) ...
CSS-position: fixed固定定位
固定定位 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
CSS基础: 五种定位以及定位叠放次序
前面看到浮动其实可以让某个盒子模块在某个位置,但是为什么还要右定位? 其实很简单,因为浮动有些定位是解决不了的,比如看下图: 在滑动的时候,你发现了没有,那就是标记的地方,拉动网页都在顶部和侧面,如果 ...
CSS的浮动与定位手把手教学
目录前言一,浮动 1.1 传统网页布局的三种方式 1.2 初步了解浮动 1.3 浮动float 1.4 浮动特性(重难点) 1.4.1 性质1: 脱标,不占位 1.4.3 性质2: 浮动元素之间的 ...

CSS之定位（固定定位）

固定定位：

CSS之定位（固定定位）相关推荐

最新文章

热门文章