HTML----style-position 学习

最新推荐文章于 2021-06-03 02:39:11 发布
最新推荐文章于 2021-06-03 02:39:11 发布
阅读量894 收藏 1
点赞数 1
分类专栏： HTML 文章标签： style position
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laizhixue/article/details/79214188
版权

定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

默认值： static
继承性： no
版本： CSS2
JavaScript 语法： object.style.position="absolute"

可能的值

值 描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

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

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

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

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
上下层的切换：
设置 style 中 z-index:auto
auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:9999。
若定义为-1，代表为最底层。

     PS：若是会被一些FLASH文件给遮住，可将flash对象的参数wmode设置为transparent即可。
设置元素的形状 本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。
[html]  view plain  copy
  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4. img   
  5. {  
  6. position:absolute;  
  7. clip:rect(0px 50px 200px 0px)  
  8. }  
  9. </style>  
  10. </head>  
  11.   
  12. <body>  
  13. <p>clip 属性剪切了一幅图像：</p>  
  14. <p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>  
  15. </body>  
  16.   
  17. </html>  
提醒：写网页的时候最好给个全局的*{margin:0px;padding:0px}。

laizhixue
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html-css-网页模板-个人博客
11-23
HTML（HyperText Markup Language）负责结构化网页内容，而CSS（Cascading Style Sheets）则用于设计和布局，使网页具有视觉吸引力。 1. HTML基础知识： - HTML标签：HTML由一系列标签组成，如`<html>`, `<head>`,...
style中position的属性值详解
程驰天下的专栏
12-01 3万+
　　　　Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中，Position发挥着非常重要的作用，很多容器的定位是用Position来完成。　　Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。　　更多关于Pos
HTML中的position样式
YJT180的博客
10-27 380
定义 position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。 特点 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常位置中的默认位置偏移。 用法示例 <!DOCTYPE html> <html> <head&...
html选择定位位置,CSS中HTML元素定位Position参数可选值详解
weixin_39831902的博客
06-03 381
Position参数我们都知道是用来定位的，今天我就为各位介绍一下CSS中HTML元素定位Position参数可选值详解，希望对各位有帮助。position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值：static语法：position...
CSS position 属性-style="position:
xuanmu
02-16 473
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2&...
转 style.position的使用简介
喜欢编程の小匣子
04-06 288
style.position的使用简介 [转贴 2007-01-26 10:04:18] 转自 http://haofengrushui.blog.hexun.com/7516369_d.html position版本：CSS2　 兼容性：IE4+ NS4+　继承性：无 语法： position : static | absolute | fixed | relative ...
layout-style-1
03-25
8. **CSS定位属性**：`position`属性（如static, relative, absolute, fixed）用于控制元素的位置，这对于创建复杂的布局至关重要。 9. **浮动布局**：虽然现在浮动布局在新的布局技术面前显得较为传统，但了解如何...
母亲节祝福页面-HTML
最新发布
05-12
- `<style>`标签内包含了CSS代码，用于控制页面的样式。 4. **元素与属性**： - `body`：设置页面主体的基本样式。 - `h1` 和 `p`：分别用于设置一级标题和段落文本的样式。 5. **类选择器**： - `.container`...
HTML 2-27 CSS入门
02-27
学习CSS时，了解并熟练掌握浮动（`float`）、清除（`clear`）和相对定位（`position: relative`）是基础，同时，理解绝对定位（`position: absolute`）、固定定位（`position: fixed`）和粘性定位（`position: ...
GOT-html-css
05-01
在IT行业中，HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它与CSS（Cascading Style Sheets）一起，构成了网页设计的基础。在这个名为"GOT-html-css"的项目中，我们可以推测这是一个关于HTML和...
HTML的position详解
热门推荐
xizi_ghq的博客
08-23 5万+
今天上课半斤八两半斤八两的我突然不愿意听课，于是突然有了雅兴来解决自己这几天的疑惑。 先对自己理解的position做一个总结， 1、static：static是所有元素的默认属性，也就是可以理解为正常的文档流 2、relative:relative是相对于自己文档的位置来定位的，对旁边的元素没有影响 3、absolute：absolute是相对于父标签来进行定位的，如果没有父标签或者父标...
CSS中的定位属性position的用法
huhaha24的博客
04-30 2190
position属性是CSS中比较重要也比较难以理解的属性，下面我就来谈谈我自己的理解吧！position属性的取值有：1.static（默认值，块级元素和内联元素按照正常的方式进行排列）2.relative（相对定位）  relative相对定位是指相对自己原来的位置定位，而且它不会脱离正常的文档流，也就是还是会占据网页中的位置当设置left和top时，元素会以窗口的左上角为原点，设置left就...
div框定位(relative,absolute,fixed,static)
hookwl的专栏
03-03 1274
relative absolute fixed static 1.relative 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 child 1 child 2 child 3 2.absolute 绝对定位的元素的位置相对于最近的已定
CSS布局：position定位
沉梦昂志
06-11 323
定位和浮动区别（重点） float 浮动 浮动元素会脱离文档流，但不会脱离文本流，浮动只有左右浮动 float 元素会浮起来，具有行内块的特点，但只能浮到第二层，表现为并列 position 定位 相对定位会浮起来，但不会脱离文档流和文本流，元素原本的位置会被保留，不会变为行内块 绝对和固定定位会浮起来，脱离文档流和文本流，会变为行内块元素 position 定位元素会浮起来，但会浮到不同层，后定位的元素永远比先定位的元素层级高（未使用没有z-index的情况下），表现为层叠 position 属性
CSS中position属性详解
分享--------留住生活
08-22 299
CSS中的position属性主要是用来对一个元素进行定位的，包含四个常用的属性值：static、absolute、relative、fixed。 1.static 默认值，即没有定位，遵循正常的文档流对象。设置了static值之后，在设置top、left、right、bottom、z-index都不起作用。 2.absolute 绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父...
html中position定位问题
weixin_30402343的博客
10-20 176
position定位属性，检索对象的定位方式 一、语法：position：static（无特殊定位）/absolute（绝对定位）/relative（相对定位）/fixed（固定定位） 1、static：默认值，无特殊定位，对象遵循HTML原则； 2、absolute：绝对定位，将对象从文档流中拖出，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进...
HTML中元素的position属性详解
wangzunkuan的博客
08-09 7515
CSS 有三种基本的定位机制：相对定位（relative）、浮动定位（float）和绝对定位（absolute）。默认情况下，所有元素都采用相对定位，即DOM元素的位置由元素在 (X)HTML 中的位置决定。普通定位的具体规则是： 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边...
html position坐标,HTML DOM Style position 属性 | 菜鸟教程
weixin_35697297的博客
05-31 345
Style position 属性 Style 对象定义和用法position 属性设置或返回用于元素定位方法的类型(static(静态的)、relative(相对的)、absolute(绝对的)或 fixed(固定的))。语法设置 position 属性：Object.style.position="static|absolute|fixed|relative|inherit"返回 positi...
style="position:relative;left:-400px
ryb123的专栏
08-09 1013
style="position:relative;left:-400px 这个语句可以相对于他原来的位置向左移动400px；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

laizhixue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值