DOM之重新介绍CSS的定位

 CSS定位在构建图形化组件上变得非常臃肿, 在这节中, 我们需要记住它和它的使用.

Static

默认的定位类型, 如果没有显示的设定position, 则使用这个. 下面例子说明了这个特点.

代码名称

<style> /* basic style */
.widget { 
  background-color: #ffe4c4;   
  width: 500px;
}

#today-header {
  background-color: #5f9ea0;
  margin: 0;
}
</style>


<h1>Static positioning</h1>

<div class="widget">
    The widget header.

    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>
</div>

The footer.

一个position: static元素也叫做不是定位元素. 其他任何position类型都是一个position元素.

Relative

元素可以相对于他的位置, 设定position.

使用相对定位, 你必须定义: position: relative 的CSS属性且一个或者两个坐标值:

• top/bottom

• left/right

通过都是选择一对X,Y坐标形式. 元素通过给定的距离移动.看看下面的代码例子: 

代码名称

<style> /* basic style */
.widget { 
  background-color: #ffe4c4;   
  width: 500px;
}

#today-header {
  background-color: #5f9ea0;
  margin: 0;
}
</style>

<style>
.widget{
    position: relative;
    left: 30px; 
    top: -30px;
  }
</style>


<h1>Relative positioning</h1> 

<div class="widget">
    The widget header.

    
    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>
</div>

The footer.

我们可以看到上面的例子代码, 元素被移动了: 

• left: 30px:在默认的位置向左移动30个像素.

• top: -30px:  如果是设定"30px", 元素会从默认位置向下移动. 但是因为是负值, 他会向上移动

left/top在position: static上不起作用: 

position: relative移动元素, 但是这个位置他是占据的. 上面的例子中, the footer不会往上移动, 因为position元素还是占据了原来的空间.

Fixed

这个类型在IE<8下是不支持的, 我们来模拟这个行为. 

两件事情会做:

1. 从他的位置移除.另外的元素会移动到他的之前位置.

2. 移动这个元素到相对的窗口. 是window,不是document.当页面滚动, 这个fixed元素还是会保持在相对窗口的位置.

在下面的例子中, 页面滚动,但是#go-top链接总是在相同的位置

代码名称

<style>
#go-top {
    position: fixed;
    right: 10px;
    top: 10px;
    font-size: 125%;
  }
</style>

<a href="#top" id="go-top">Scroll, I don't move!</a>


<h1 id="top">Fixed positioning</h1>
    The widget header.

<div class="widget">
    
    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>

   <p>SquirrelFish is a register-based, direct-threaded, high-level bytecode engine, with a sliding register window calling convention. It lazily generates bytecodes from a syntax tree, using a simple one-pass compiler with built-in copy propagation.</p>

</div>

The footer.

Absolute

绝对定位是很重要的.

他会做两件事:

1. 他的位置会被移除. 另外的元素会占据他的位置. 

2. 移动元素到他相对的position的父元素, 如果没有position的父元素, 则会移动到document.

最近的定位父元素不包含static的position.

下面例子中widget是局对定位的. 因为没有一个定位父元素, widget元素移动到文档右下角.

代码名称

<style>
  @import url(/files/tutorial/browser/dom/poscolor.css)
</style>

<style>
.widget{
    border: 1px solid black;
    position: absolute;
    right: 0;
    bottom: 0;
  }
</style>


<h1>Absolute positioning</h1>

<div class="widget">
    The widget header.

    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>
</div>

The footer.

widget元素从这流中移除, 因此 "the footer"移动到他之前的位置.

Absolute 在定位的父元素里

定位一个头部到widget的右上角. 下面使用绝对定位:

代码名称

<style>
  @import url(/files/tutorial/browser/dom/poscolor.css)
</style>

<style>
.widget{
    position: relative;
  }
  #today-header {
    position: absolute;
    right: 0px;
    top: 0px;
  }
</style>


# Absolute positioning   

<div class="widget">
    The widget header.

    <h1 id="today-header">Information</h1>

    <p>A new byte-code standard is defined for JavaScript... <br/>
         Ok, just dreaming.</p>
</div>

The footer.

在上面的例子中, #today-header 绝对定位到他最近的定位父元素的右上角… .widget 元素,因为他的定位大不是 static的定位元素.

 设置position:relative的通用方法: 确保元素是定位元素, 内部的绝对定位元素就会相对于他而言.

有时候这种方式很好, 但是我们需要保持这个位置的时候, 就得需要添加其他额外的样式属性.

编程的人正在在线培训

"前端编程开发","后端开发","移动开发"等,

需要学习的可以加入群或者微信留言

原创内容,转载请注明出处.

公众微信号:bianchengderen

QQ群:186659233

欢迎大家传播与分享.

---

融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.