`

如何使body居中，绝对定位与相对定位

XHTMLCSSHTML 
阅读更多

<!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=gb2312" />

  <style type="text/css">
/*
给body加了一个边框，可以看出，body已经居中了
*/
body {
 MARGIN: 0 AUTO;
 width: 700px;
 border: solid 1px #000;
}
</style>

 </head>
 <body>

  <!-- 在该div里面设置position:relative;则该div里面设为绝对定位的元素将是相对于该div进行绝对定位了-->
  <div
   style="position: relative; MARGIN: 0 AUTO; width: 200px; height: 400px; background: orange;"
   name="father">


   <div style="LEFT: 0px; POSITION: absolute; TOP: 260px;">
    这部分是相对于name="father"的div进行绝对定位的

   </div>

  </div>

  <div style="LEFT: 0px; POSITION: absolute; TOP: 260px;">
   这部分是相对于当前窗口进行绝对定位的

  </div>

 </body>
</html>
</html>

分享到：
| 让网页上的超链接失效，不能点击
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯CSS实现不固定大小div相对于body垂直居中效果

    相对于body居中的另外一种写法 原理比较难以理解，这里只简单的说下如何使用： 1、在body的根目录下建立两个嵌套的div 2、分别给两个div加上样式属性即可，详细请见附件index.html文件

    HTML5&CSS3网页制作：绝对定位.pptx

    在CSS中，绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。绝对定位使元素的位置与文档流无关，因此不占据空间。...

    css 中的定位详解

    不同的定位类型(静态、绝对、相对和固定)，以及位置的浮动，涵盖了大多数布局场景。在探讨每种定位类型是如何工作的之后，将进行一些练习，使它们真正发挥作用。 1.静态定位 静态定位是页面默认值。元素按照它们在源...

    CSS中关于绝对定位和相对定位

    body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {  width: 100px;  height: 100px;  margin: 5 auto;  color: #fff;  background: #000; } .aa, .bb, .cc, .dd, .ee {  top: 10px;  left: 10px;  ...

    1.05 css定位布局

    绝对定位使元素的位置与文档流无关，因此不占据空间。生成绝对定位的元素，相对于 static 定位以外的第一个父元素（body）进行定位。 * fixed：固定定位。生成固定定位的元素，相对于浏览器窗口进行定位。 #### ...

    css3块元素居中

    这个方法可以实现不定宽块元素的居中，但是需要使用相对定位。 竖直居中 竖直居中的方法有两种： 方法一：使用插入 table 标签 使用插入 `table` (包括 `tbody`、`tr`、`td`)标签，同时设置 `vertical-align: ...

    CSS网页布局DIV水平居中的各种方法

    二、相对定位与负的边距 #wrap { position:relative; width:760px; left:50%; margin-left:-380px } 这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也...

    css控制div中元素居中的示例.pdf

    首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘 50% 的位置。这样，该容器的左外边距将从页面 50% 宽度的位置开始算起。 然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该...

    绝对定位的元素在ie6下不显示隐藏了的有效解决方法

    在 ie6 中如果一个浮动元素与绝对定位元素相邻的话，在某些情况下绝对定位元素将会消失。 产生原因： 只有当绝对定位元素的邻近浮动元素的宽度大于父层宽度减 3 时（即如果父层宽度是 300px，浮动元素的宽度大于 ...

    wifi 人体定位Multi-Person Localization via RF Body Reflections

    wifi 人体定位Multi-Person Localization via RF Body Reflections

    CSS教程:position 绝对定位的问题

    今天做页的时候，遇到了一个问题：div无法对父对象绝对定位。 &lt;div id=fa&gt; &lt;div id=so xss=removed&gt; &lt;/div&gt; 但是发现无论怎么调整都是针对body定位，郁闷！ 看了下css手册，也没发现有什么不对。到网上查了下，发现...

    Flutter Text内容居中显示

    通过设置textAlign属性的值为TextAlign.center可以让Text的内容居中 class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text...

    CSS中position定位的个熟悉示例介绍

    absolute绝对定位（相对于最近的父元素，假如父元素都是默认的static，那么将相对body进行定位，如果父元素为relative定位，那么就相对该父元素进行定位） relative相对定位（相对于自己，在原来位置上移动。与...

    CSS定位“十字架”之水平垂直居中

    本文为大家分享了CSS定位“十字架“之水平垂直居中效果的实现方法，具体内容如下 1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个...

    前端面试题.md

    ##绝对定位和相对定位 ###绝对定位（absolute） 如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、...

    css 水平居中，垂直居中，自适应宽度的代码

    而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。 2.居中：这里我们应该会想到1/2、50%、一半等这些东西。　 　上图中：黑色为body，深绿色需要在body中水平居中，并且宽度是自适应的。亮绿色，是...

    不定宽高的文字在div中垂直居中实现方法

    本人在面试的时候被问到：如何使一段不定宽高的文字垂直居中呢？ 现在来总结一下： 在body中写入结构 djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds...

    @RequestBody与@Validated使用时校验失效.md

    @RequestBody与@Validated使用时校验失效.md

    5GCMP平台“轻翼定位”使用说明书（客户使用）V1

    5GCMP平台“轻翼定位”使用说明书（客户使用）V1 本资源摘要信息将为您详细介绍5GCMP平台“轻翼定位”的使用说明书，该说明书旨在帮助客户更好地使用“轻翼定位”产品。下面将逐步介绍产品的使用方法、定位接口调用...

    div层居中代码下载

    如何让DIV居中，这里有源代码。 许多朋友都不清楚DIV如何让它居中，其实很简单！ 如果是对页面所有DIV居中，就写在BODY的CSS中; 如果是针对特定的DIV，就写在该DIV的CSS中

Magicbox
Global site tag (gtag.js) - Google Analytics