css-position


Div on top 100%


I try to put a div 100% on top of the content of the page. The problem comes when the content has some margin. I illustrate here with a simplified case.
If I understand, position fixed: "The element is positioned relative to the browser window". So, why the div .trans is affected by what is behind? How to put the div transparent 100% of the page and on top of content?
Here is a good place to see the problem and try the solutions: http://jsfiddle.net/rdkAW/1/
CSS:
body { margin:0; }
.trans{
position:fixed;
width:100%; height:100%;
margin:0;
opacity:0.7; filter: alpha(opacity = 70);
background-color:red;
z-index:5;
}
#content {
position:relative;
margin:30px auto; /* is this the problem? */
width:95%; max-width:890px; height:1200px;
z-index:1;
background-color:blue;
}
HTML:
<div class="trans"></div>
<div id="content"></div>
The problem is solved if I use. top:0; left:0; It seems that position fixed needs that. I still do not understand very well why. If the fixed div is 100% and by definition fixed position is relative to the window, why is it need to specify top and left? I would appreciate if someone can explain it.

Related Links

Content div nex to fluid fixed div
Where does this distance difference come from
Absolute position relative to some arbitrary element
Relative positioning of custom controls with OpenLayers 3
How to set div height with relative position as child div with absolute position using css?
I'm trying to put a fixed divsion at the top of the page but when I scroll with FF, lines are lost
fixed position z-index not working
how to create adjustable gap between elements (div)
How to properly apply a css hack for IE11 transition misbehaviour
How do you make leaflet popup window full screen on small screens?
Fix a div to the bottom while scrolling with skrollr
Sticky Footer at bottom of PAGE, not just bottom of WINDOW
How to set div absolute position from the parent div
Polymer paper-fab with position:fixed behaves strangely when used with core-list that has a scrollTarget
What is the use of “static” positioning in CSS?
CSS: fixed position

Categories

HOME
eclipse
polymer
gpu
3d
composite-primary-key
r-googlesheets
switch-statement
mips
big-o
onclick
gluon-mobile
jtextpane
lanczos
teechart
mql5
startup
alamofire
mxgraph
line
code-generation
esoteric-languages
intershop
red5
imessage
nodemcu
ksh
object-storage
comparator
interbase
progress-bar
8051
android-things
spotipy
vex
winpe
record
jbutton
installshield-le
sim-card
odroid
chef-solo
oracle-service-bus
vaadin-elements
java-6
git-flow
otp
libjpeg
mouseleave
trigger.io
cudd
signalr.client
jodd
mapinfo
ng-grid
gcloud-ruby
fuzzywuzzy
custom-errors
tfs-workitem
video-player
iced-coffeescript
git-ftp
matlab-deployment
zend-currency
rrule
variadic-templates
at-job
uncaught-typeerror
pseudo-class
sip-server
cocos3d
imagefilter
tinyxml
eclipse-kepler
artemis
node-blade
curb
patricia-trie
inkcanvas
failing-tests
kqueue
event-receiver
http-daemon
appledoc
objective-j
vs-android
pos-for-.net
wcf-proxy
blind

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App