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

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
Style sheet positioning won't keep everything in place
Div on top 100%
CSS float image align
google sites html box tool css postion absolute
Manual Positioning of Shareaholic ShareBar Plugin
Div position (margin:auto)
Removing or Hiding Blank Space Left by Relative Positioning
Lightweight Javascript Responsive Positioning Library
Bootstrap 3.0 : Fixed column
space under footer on large screen resolution

Categories

HOME
notepad++
google-app-engine
fabricjs
nunit
apiblueprint
bitbucket-api
xbee
switch-statement
dojo
visual-studio-emulator
boto3
joomla3.0
extjs4.2
project
line
3nf
job-scheduling
foreign-keys
cfml
delphi-xe5
libigl
highstock
jquery-multiselect
gpio
openmdao
failover
event-flow
clickjacking
hreflang
login-script
getlasterror
navigator
video-capture
xajax
swagger-php
openproject
projects-and-solutions
typesafe-config
jvmti
unordered-map
azure-arm
importerror
openresty
facebook-pixel
configurationmanager
colorbar
lsyncd
gameplay-kit
objectscript
vibrate
choice
simplepie
redbeard-ios
pacemaker
dotnetnuke-7
beamer
drawstring
android-wake-lock
http-status-code-401
deep
riot
phpwebsocket
beanstalk
rate-limiting
intel-c++
zen-cart
wso2greg
rdflib
linked-tables
rrule
webmatrix-3
human-computer-interface
gnumeric
ios8-extension
draw2d-js
clickbank
eclipse-kepler
time.h
abstract-data-type
windows-98
stacky
server-administration
monotouch.dialog
cakephp-1.2
wcf-configuration
fusefabric
flex-mobile
filemerge
quotation-marks
unattended-processing
twitterizer
nhprof
web-garden
cfwindow
visualj#
sqlobject
business-model

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