position窗口居中

position的四个属性值:

  1. relative
  2. absolute
  3. fixed
  4. static

下面分别讲述这四个属性。

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>

1. relative

relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:

#sub1
{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}

我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。

对于此,您只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。

随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。

如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。

注意relative的偏移是基于对象的margin的左上侧的。

2. absolute

这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。

当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:

(1)当sub1的父对象(或曾祖父,只要是父级对象)parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。

注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

接下来的问题是,sub2的位置到哪里去了呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于sub1,而是直接从parent开始。

(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。

3. fixed

fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

4. static

position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

转载自:http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

只用CSS做到完全居中:

1、设置好元素高度

2、添加如下样式:

.Absolute-Center {

  marginauto;

  positionabsolute;

  top0left0bottom0right0;

}

转载自:  http://blog.jobbole.com/46574/

时间: 2024-10-07 15:36:39

position窗口居中的相关文章

Jqury 块在window窗口居中

1.块在父容器里居中常用方法—— position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; width: 500px; height: 400px; 其中: margin-left: -250px; /* 元素本身文档宽度的一半*/ margin-top: -200px /* 元素本身文档高度的一半*/ /* 注意-有滚动条时:这种居中必须滚动条滑到中间,效果不好 */ 2 块在window

最近玩了一下qt5.2.1,顺着写点东西,关于这个版本设置程序主窗口居中

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 #include <QtGui/QGuiApplication> #include <QDebug> #include <QScreen> #include "qtquick2applicationviewer.h" int main(int argc, char *argv[]) {     QGuiApplication app(arg

PYQT窗口居中

#UI.py,通过UI设计师制作后直接转换为UI.py脚本 # -*- coding: utf-8 -*-from PyQt4 import QtCore, QtGui try:    _fromUtf8 = QtCore.QString.fromUtf8except AttributeError:    _fromUtf8 = lambda s: s class Ui_Form(object):    def setupUi(self, Form):        Form.setObject

css3 position fixed居中的问题

通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 如果还想让此元素位置固定呢?一般我们会添加position:fixed,如下: #element{ position:fixed; margin:0 auto; } 但是这样做的结果就是,元素不居中了.这说明fixed使对象脱离了正常文档流. 解决方案: #element{ position:fixed; margin:0 auto; left:0; right:0; } 但是在IE7以下的版本中无法工作

MFC 窗口居中显示 VS2010

MFC 窗口居中显示  VS2010 (2011-09-11 19:52:05) 转载▼ 标签: 窗口居中显示 it 分类: MFC MFC窗口居中显示   VS2010   工程名为:MFC22_6 目的:点击居中按钮,窗口将在文档的中央显示思路:使窗口居中显示可以调用CWnd::CenterWindow函数.void CenterWindow(CWnd* pAlternateOwner=NULL):步骤: 1.   用创建一个单文档应用程序 2.   添加一个对话框资源//(类视图 右键—添

JavaScript特效实例005-控制弹出窗口居中显示

实例005                控制弹出窗口居中显示 实例说明 点击页面上的按钮,弹出窗口,并将窗口居中显示. 技术要点 本例首先应用JavaScript中的window对象的open()方法,打开指定大小的新窗口,然后通过screen对象,获取屏幕分辨率,再根据获取的值通过window对象的moveTo()方法,将新窗口移动到屏幕居中位置. moveTo()方法将窗口移动到指定坐标(x,y)处,其语法格式如下. window.moveTo(x,y) 其中,参数x,y表示窗口移动到的位

window.open窗口居中和窗口最大化

1.window.open()参数 window.open(pageURL,name,parameters) 其中: pageURL为子窗口路径 name为子窗口句柄 parameters为窗口参数(各参数用逗号分隔),如常用的 'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no,titlebar=no' (yes/no也可使用1/0,在

Qt 设置窗口居中显示和窗体大小

设置窗口居中显示 方法一:在窗口(QWidget类及派生类)的构造函数中添加如下代码: #include <QDesktopWidget> //....... QDesktopWidget* desktop = QApplication::desktop(); // =qApp->desktop();也可以 move((desktop->width() - this->width())/2, (desktop->height() - this->height())

WPF 窗口居中 &amp; 变更触发机制

原文:WPF 窗口居中 & 变更触发机制 窗口居中 & 变更触发机制 解决: 1.单实例窗口,窗口每次隐藏后再显示时,位置居中显示 2.多屏幕下单实例窗口,当父窗口移动到其它屏幕时,单实例窗口再次弹出时,位置才更新到父窗口屏幕. 3.子窗口每次唤醒时,都居中显示. 窗口首次显示的位置 - WindowStartupLocation windows的启动时位置显示,WindowStartupLocation CenterOwner --显示在父窗口的中间(设置Owner) CenterScr