技术心得:对Css属性:positon的认识与理解!

简介: 技术心得:对Css属性:positon的认识与理解!

"

Position的值有:absolute,fixed,relative,static,inherit.

absolute的描述:1.生成绝对定位的元素,相对于static定位以外的第一个父元素定位。

2. 元素的位置通过""left"",""top"",""right"",""bottom""属性进行规定。

fixde的描述:1.生成绝对定位元素,相对于浏览器窗口进行定位。

  2. 元素的位置通过""left"",""top"",""right"",""bottom""属性进行规定。

relative的描述:1.生成相对定位的元素,相对于它的正常位置进行定位。

2.例如:""left:20"",会向元素的left位置添加20像素(px)

static的描述:是一个默认值,没有定位,元素会在正常位置。

inherit的描述:规定应该父元素继承position属性的值。

Document

*{

margin: 0;

padding: 0;

}

.boa div{

//代码效果参考:https://v.youku.com/v_show/id_XNjQwNjgyMTgxNg==.html

width: 200px;

height: 200px;

background-color: aquamarine;

margin-right: 30px;

display: inline-block;

text-align: center;

font-size: 30px;

line-height: 200px;

}

.bob{

position: relative;

left: 20px;

top: 20px;

}

.boc .three{

position: absolute;

left: 100px;

background-color:rgb(194, 173, 176);

z-index: 77;

opacity: .6;

}

.bod{

height: 600px;

position: relative;

}

.boe{

position: sticky;

//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDM2NjczNg==.html

height: 100px;

width: 100px;

top: 100px;

background-color: rgb(182, 189, 186);

margin-bottom: 100px;

}

.bof{

position: sticky;

height: 100px;

width: 100px;

top: 50px;

opacity: .8;

background-color: rgb(118, 219, 175);

}

.boh{

height: 1200px;

background-color: aquamarine;

}


"
image.png
相关文章
|
3月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
3月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
35 0
|
3月前
|
前端开发
CSS属性
CSS属性
32 0
|
1月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
27 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
49 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
1月前
|
前端开发
css简写属性
css简写属性
30 0
|
2月前
|
前端开发 开发者 UED
CSS不同技术的探讨
【10月更文挑战第11天】 CSS不同技术的探讨
|
2月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
2月前
|
前端开发 开发者 UED
CSS技术的演变与应用
【10月更文挑战第11天】CSS技术的演变与应用