web第6次作业position

position 属性指定了元素的定位类型。

position 属性的五个值：

static （静态定位）

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。
```
div.static {position: static;border: 3px solid #73AD21;
}
```
relative （相对定位）相对定位元素的定位是相对其正常位置.

h2.pos_left
{position:relative;left:-20px;
}
h2.pos_right
{position:relative;left:20px;
}

移动相对定位元素，但它原本所占的空间不会改变

h2.pos_top
{position:relative;top:-50px;
}

fixed （绝对定位）
元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p.pos_fixed
{position:fixed;top:30px;right:5px;
}

absolute （固定定位）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2
{position:absolute;left:100px;top:150px;
}

sticky (粘性定位)

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
```
div.sticky {position: -webkit-sticky; /* Safari */position: sticky;top: 0;background-color: green;border: 2px solid #4CAF50;
}
```

转载于:https://www.cnblogs.com/24KchUNshuAI/p/9826137.html

web第6次作业position相关推荐

学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
Web 编程期中大作业
Web 编程期中大作业: node.js进行网页爬虫前言在做期中作业之前,我们已经学习了HTML,CSS,Node.js,javascript的相关知识,但这个项目还是令我感到一头雾水,不知从何下 ...
web前端电影项目作业源码大学生影视主题网页制作电影网页设计模板学生静态网页作业成品 dreamweaver电影HTML网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
DIV布局 web网页设计实例作业 ——抗疫-逆行者(5页) 致敬逆行者网页设计作品大学生抗疫感动专题网页设计作业模板疫情感动人物静态HTML网页模板下载
web网页设计实例作业 --抗疫-逆行者(5页) 致敬逆行者网页设计作品大学生抗疫感动专题网页设计作业模板疫情感动人物静态HTML网页模板下载常见网页设计作业题材有个人. 美食. 公司. 学校 ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端实训作业 html+css+javascript 水果网页设计实例企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...
Web前端期末大作业-响应式室内家具网页设计（HTML+CSS+JS）实现
作者主页:Java李杨勇文末获取源码联系临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想 ...
web前端期末大作业在线电影网页设计与制作 HTML+CSS+JavaScript仿叮当电影网页制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

web第6次作业position

web第6次作业position相关推荐

最新文章

热门文章