css position
css position & top,left,bottom,right are used for position html element.
position has four values:static,fix,relative,absolute.
here is a example to show differents between position's four values:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css position</title>
<style type="text/css">
body {height: 2000px; width: 2000px; background-color: gray;position: relative;left: 100px;}
/* position */
.t1 {position: fixed; top: 200px; left: 300px;}
.t2 {position: relative; top: 50px; left: 100px;}
.t3 {position: absolute; top: 200px; left: 50px;}
/* colors */
.red {background-color: red;}
.green {background-color: green;}
.yellow {background-color: yellow;}
.purple {background-color: purple;}
.white {background-color: white;}
/* size */
div {width: 200px; height: 300px;}
.wh120 {width:120px; height:120px;}
.wh60 {width:60px; height:60px;z-index: 1;}
</style>
</head>
<body>
<div class="t1 red">
<div class="t3 white wh60"></div>
</div>
<div class="t2 green">
<div class="t3 white wh60"></div>
</div>
<div class="yellow"></div>
<div class="t3 purple wh120"></div>
</body>
</html>
分享到：
相关推荐
"CSS Position"是一个关键概念，它决定了元素在页面上的位置和排列方式。理解并掌握CSS定位对于创建响应式、动态且布局精确的网页至关重要。 **定位模式** CSS提供了几种定位模式，包括静态定位（static）、相对...
CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值： fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： 实例 p.pos_fixed { position:fixed; ...
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素在页面上的定位方式。本文件主要探讨了`position`属性的两个关键值：`relative`和`absolute`，这些知识点对于创建复杂的网页布局至关重要。 首先，...
css position总结
position属性 position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值： •static •relative •fixed •absolute •sticky 然后使用top，bottom，left和right属性定位元素...
CSS Position定位是CSS布局中的重要概念，它决定了元素在页面中的具体位置。定位方式有多种，包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)以及继承定位(inherit)。每种定位方式...
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的...
《CSS position属性详解：absolute, relative及其他值》 在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。position属性有五个基本值：static、relative、absolute、...
CSS Position relative 和 absolute 的区别 在 CSS 中，position 属性 plays a crucial role 在排版元素中。在 position 属性中，有五个值：static、inherit、fixed、absolute 和 relative。今天，我们将深入探讨 ...
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。当我们谈论`position: absolute`时，通常会涉及到相对于某个参照物的定位。默认情况下，`absolute`定位是基于整个文档（即body）...
在CSS布局中，`position:absolute`是一个重要的属性，它允许元素相对于最近的非静态定位祖先元素（如果存在）或初始包含块（通常是浏览器窗口）进行定位。本篇将全面探讨`position:absolute`的特征、用法及其对布局...
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
在CSS中，`position`属性是控制元素在页面布局中定位的重要方式。本教程将详细讲解`position`的四种主要值：`static`、`relative`、`absolute`以及它们在实际布局中的应用。 1. `position: static` 所有元素默认的...
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...