网站首页 > 技术文章正文

定位网页元素—第八章（网页定位怎么写）

nanyue 2024-09-12 16:03:07 技术文章 10 ℃

一、position 属性

1、static：默认值，没有定位，以标准流方式显示。

2、relative：相对定位，相对于自身原来位置进行偏移。偏移设置：top、left、right、bottom；

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。

设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响。

设置相对定位的盒子原来的位置会被保留下来。

3、absolute：绝对定位偏移设置： left、right、top、bottom；

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

元素位置发生偏移后，它原来的位置不会被保留下来

4、fixed：固定定位偏移设置： left、right、top、bottom；

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口；

二、z-index属性：

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

属性说明举例

opacity:xx值为0~1，值越小越透明opacity:0.4;

filter:alpha(opacity=x)x值为0~100，值越小越透明filter:alpha(opacity=40);

三、代码展示：

<!DOCTYPE html>

<head>

<title>花样链接卡</title>

</head>

<style>

padding:0px;

margin:0px;

}

text-decoration: none;

color:#fff;

position: relative;

top:35px;

}

.container{

width:320px;

height: 320px;

margin-top: 10px;

margin-left: 10px;

border: 2px solid red;

}

.container>div{

display: block;

width: 100px;

height: 100px;

background:#fd7dfd;

text-align: center;

}

.container>div:nth-of-type(1){

position: relative;

left: 10px;

top:10px;

}

.container>div:nth-of-type(2){

position: relative;

left: 210px;

bottom: 100px;

top:-90px;

}

.container>div:nth-of-type(3){

position: relative;

left: 10px;

bottom:-10px;

}

.container>div:nth-of-type(4){

position: relative;

left: 210px;

bottom:90px;

}

.container>div:nth-of-type(5){

position: relative;

left: 110px;

bottom: 290px;

}

.container>div:hover{

background-color:blue;

}

</style>

<body>

</div>

</body>

</html>

<html>

<head>

<title>奖多多安全购彩页面</title>

</head>

<style>

.zhu{

width: 1300px;

margin-left: 250px;

}

.fu>.zuo{

position: absolute;

top:150px;

}

.fu .youOne{

position: absolute;

float:right;

top:150px;

right: 0px;

}

.fu .youTwo{

position: fixed;

float:right;

right: 0;

bottom: 220px;

}

.fu .youThree{

position: fixed;

float:right;

right: 0;

bottom: 0px;

}

</style>

<body>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlEight/huayanglianjie.html

file:///D:/ruanjian/VS/wenjianxiangmu/htmlEight/caipiao.html

上一篇： HTML5常用的标签 |实用干货（html5常用标签大全）
下一篇： 5.标准文档结构（文档结构是什么）

网站首页 > 技术文章 正文

定位网页元素—第八章（网页定位怎么写）

猜你喜欢

网站首页 > 技术文章正文