css-position


fixed position z-index not working


I'm trying to get an image to go over my posts, so the text and images go behind the image. The z-index isn't working when i try to get it to stack over everything. I'm not an expert at coding and I'm honestly just using tumblr for this, but I can't seem to find an answer anywhere. or one that I can understand, given the fact that I'm still a beginner. Any help would be super appreciated, here's the code:
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
}
I have added a code snippet, it contains just a div. The div overlaps the body. if you provide your source code, I can clarify though. you could also try increasing the z-index to 99 or 999. I think there is many z index'd div's in your code.
<html>
<head>
<title></title>
</head>
<style type="text/css">
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
background-color: red;
}
body{
background-color: #ccc;
}
</style>
<body>
<div id="char">
</div>
</body>
</html>
You could also try adding the image as a background image to an element and then putting your text in another element inside of that one. With a few lines of alignment code you can get your text where you want it.
<style>
.divStyle {
background-image: url('http://38.media.tumblr.com/a10b40131efc719d0bff421226b9c52b/tumblr_inline_mq5b19gEvv1qz4rgp.jpg');
background-size: cover;
height: 90vh; // put this to a 100 to cover the full height of the containing element (less here to avoid scroll bar)
width: 100%;
display: flex;
align-items: center; //change center to 'flex-start' to move text to top or 'flex-end' to move it to the bottom
}
.myText {
width: 100%;
color: white;
font-size: 24px;
text-align: center; //can also be 'left' or 'right'
}
</style>
<div class="divStyle">
<div class="myText">Here is my text</div>
</div>

Related Links

How to absolutly center an overlaid Font Awesome icon?
Sticky slick slider element hidden when position fixed
Why “POSITION:RELATIVE” messes up things?
div containing absolute img has zero height
Need static menu when overflow-x:scroll
How can I put a section under cross-fade background section
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?

Categories

HOME
apache-flink
nunit
powerpoint
swt
modal-dialog
special-characters
teechart
rcloud
qpython
g++
vimdiff
reactive-programming
intercom
qsqlquery
docx
bitnami
intershop
xmonad
foreign-keys
nodemcu
boost-icl
rubymotion
dataflow-diagram
exploit
strongname
data.stackexchange.com
tiki-wiki
motion-detection
datastax-enterprise-graph
userdefaults
volatile
mustache
mailkit
android-gridview
nested-lists
reverse
xcode7.3
flatmap
apns-php
unordered-map
kill
tasm
plaintext
vmware-fusion
levenshtein-distance
apollostack
http-request
plan-9
xbmc
automapper-5
sundials
bbpress
monkey
flyout
django-1.10
testrail
vcloud-director-rest-api
rocks
ziparchive
watch-os-2
android-dateutils
eigenvector
google-query-language
lua-telegram-bot
toran-proxy
vigenere
baasbox
ocra
linked-tables
broadband
showdialog
iiop
strawberry-perl
koala
away3d
neos-server
asplinkbutton
wimax
jquery-blockui
uimanageddocument
zope.interface
paginator
pinch
workflow-services
quotation-marks
ruby-1.8
opml
spread
todos
dsoframer
ifilter
pbcopy

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