CSS之定位

CSS之定位

 

 

CSS定位有五种

static

relative

fixed

absolute

sticky


static 为默认值 该是什么样 还是什么样,

 

-------------------------------------------------------------------------------

 

 


relative

相对定位元素的定位是相对其正常位置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h2.pos_left
{
    position:relative;
    left:-20px;
}

h2.pos_right
{
    position:relative;
    left:20px;
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>
View Code

 

 


fixed

固定在某个页面,以浏览器的界面为判断标准

absolute 定位

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


sticky 定位

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 (查看以下实例)。

这个就很有意思了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>
View Code

 

根据状态而改变定位的方式


 

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。


 

补充

top bottom left right 

属性规定元素的上下左右边缘。该属性定义了定位元素左外边距边界与其包含块上下左右边界之间的偏移。’

对于绝对定位元素,bottom属性设置单位高于/低于包含它的元素的底边。

对于相对定位元素,bottom属性设置单位高于/低于其正常位置的元素的底边。

如果 "position" 属性的值为 "static",那么设置 "xxxx" 属性不会产生任何效果。

 

posted @ 2018-11-19 20:33 大眼侠 阅读( ...) 评论( ...) 编辑 收藏
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中的定位属性是布局控制的重要工具,它主要有两种主要方式:绝对定位(absolute positioning)和相对定位(relative positioning)。 **1. 相对定位 (Relative Positioning)**: - 原则:相对定位是基于元素的正常文档流来进行定位的。如果设置了`position: relative;`,元素会保持其在文档中的默认位置,然后可以通过`top`, `right`, `bottom`, 和 `left` 属性指定偏移量。 - 行为:相对定位的元素不会影响到其他元素的位置,它会在原位置的基础上移动,同时周围的元素会围绕它移动。 - 示例:你可以使用相对定位来创建一个弹出框或浮动元素。 **2. 绝对定位 (Absolute Positioning)**: - 原则:绝对定位元素会脱离正常的文档流,完全根据`top`, `right`, `bottom`, `left` 属性以及`position: absolute;`声明来定位,与最近的已定位(`position: relative;`)祖先元素相关联,如果没有,则相对于视口(浏览器窗口)定位。 - 行为:绝对定位元素会完全离开其在文档中的原始位置,其他元素也不会因此受到影响,除非它们也设置为绝对定位并覆盖了该元素。 - 示例:通常用于创建固定在页面某个角落的导航菜单或图片,或者是响应式的网页设计中,如轮播图中的图片。 **相关问题**: 1. 相对定位和绝对定位有什么区别? 2. 如何使用`position: relative;`和`position: absolute;`来配合使用? 3. 绝对定位的`z-index`属性有什么作用?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值