2013-05-04 46 views
3

我有一個div,我已經定位使用CSS的絕對定位屬性。現在我想知道是否有辦法讓這個div顯示在我現在正在屏幕中看到的完全相同的位置,即使屏幕較小或較大,而不改變div的絕對定位屬性?關於絕對定位屬性

這只是一個粗略的例子:

<div class="name"> I am somewhere in the body </div> 
................... 
..................so and so codes... 
.................. 
<div class="display">I want to stand beside the class called name </div> 

如果我寫的顯示的CSS,然後它會在類名

.display { 
    position: absolute; 
    width: 200px; 
    top : 132px; [assume] 
    left : 200px; [assume] 
    border: #D3D3D3; 
    -webkit-box-shadow: 5px 5px 15px #888; 
    -moz-box-shadow: 5px 5px 15px #888; 
    box-shadow: 5px 5px 15px #888; 
} 

這是我的屏幕上顯示正確正好旁邊。但是,如果屏幕大小不同,它不再顯示正確的位置,因爲我已經使用了絕對定位屬性。但是現在我想知道在不改變絕對定位屬性的情況下是否有解決方法或技巧。

+0

不要被絕對位置財產中的「絕對」所誤導。這不是絕對的。這是相對的! – Jawad 2013-05-04 19:29:36

+0

http://www.barelyfitz.com/screencast/html-training/css/positioning/ – Jawad 2013-05-04 19:29:56

+0

http://css-tricks.com/absolute-positioning-inside-relative-positioning/ – Jawad 2013-05-04 19:30:39

回答

2

總結這就像 -

<div id="someId"> 
    <div class="display"></div> 
</div> 

,並添加這個CSS

#someId { 
    position: relative; 
    width: 0; 
    height: 0; 
} 
+1

這實際上工作。我會說這是一個好方法... – 2013-05-04 20:49:44

1

這似乎是東西float屬性,改變你的CSS這樣的:

.display { 
    float:right; 
    width: 200px; 
    border: #D3D3D3; 
    -webkit-box-shadow: 5px 5px 15px #888; 
    -moz-box-shadow: 5px 5px 15px #888; 
    box-shadow: 5px 5px 15px #888; 
}