html - Fixed position overlap absolute position? -


i try create modal i'm stuck in getting overlay layer done.

demo http://jsfiddle.net/4z3fss9t/

.modal-wrap{       display: block;   opacity: 1;   position: absolute;   top: 20%;   padding: 0 40px;   left: 0;   border: none;   right: 0;   z-index: 9999; }  .modal-content{ background-color: white;   padding: 10px; }  .modal-overlay{       position: fixed;   background: black;   width: 100%;   height: 100%;   left: 0;   top: 0;   opacity: 0.5; } 
<div class="modal-wrap">      <div class="modal-content"> content goes here </div>      <div class="modal-overlay"></div> </div>

i expect position absolute come in front z-index don't, idea?

honestly, whole idea behind z-index in css confuses web designers. it's not rocket science, favor understanding core concepts behind what's happening. odd behaviors fighting with, seem less voodoo.

positioned elements

first of all, non-positioned elements not affected z-index. herein lies first problem, since (as noted abdul in answer) modal content not have position directive in css.

understanding css' z-index directive

here excerpt excellent article philip walton:

stacking order

z-index seems simple: elements higher z-index stacked in front of elements lower z-index, right? well, actually, no. part of problem z-index. appears simple, so developers don’t take time read rules.

every element in html document can either in front of or behind every other element in document. known stacking order. rules determine order pretty defined in spec, i’ve stated, they’re not understood developers.

when z-index , position properties aren’t involved, rules pretty simple: basically, stacking order same order of appearance in html. (ok, it’s little more complicated that, long you’re not using negative margins overlap inline elements, won’t encounter edge cases.)

when introduce position property mix, positioned elements (and children) displayed in front of non-positioned elements. (to element “positioned” means has position value other static, e.g., relative, absolute, etc.)

finally, when z-index involved, things little trickier. @ first it’s natural assume elements higher z-index values in front of elements lower z-index values, , element z-index in front of element without z-index, it’s not simple. first of all, z-index works on positioned elements. if try set z-index on element no position specified, nothing. secondly, z-index values can create stacking contexts, , seemed simple got lot more complicated.

conclusion

finally, if dive deep, there great resources z-index on mozilla developers network

  1. https://developer.mozilla.org/en-us/docs/web/css/z-index
  2. https://developer.mozilla.org/en-us/docs/web/guide/css/understanding_z_index

-

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

overview i want replace oracle.dataaccess orcale. managed dataaccess, opening connection latter throws ora-12537 network session end of file exception. exception message / stack trace {oracleinternal.network.networkexception (0x000030f9): ora-12537 : netzwerksession: dateiende @ oracleinternal.network.readerstream.read(orabuf ob) @ oracleinternal.ttc.orabufreader.getdatafromnetwork() @ oracleinternal.ttc.orabufreader.read(boolean bignoredata) @ oracleinternal.ttc.marshallingengine.unmarshalub1(boolean bignoredata) @ oracleinternal.ttc.ttcprotocolnegotiation.readresponse()} i trying connect oracle 11g database , not have client installed on local machine. working test application (unmanaged) using oracle.dataaccess works fine . using system; using oracle.dataaccess.client; namespace app.odp.unmanaged { internal class program { private static void main(string[] args) { //dummy connection string...
Read more

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

i want compress , decompress ecg signal stored text message text file , find out file size, cr,prd ratio,and qs. here code compression , decompression of ecg signal using huffman algorithm. i'm trying find out file size, compression ratio,prd ratio,qs. but error i'm getting the ecg file in text format. %clearing variables , screen enter code here clear all; close all; clc; [file1]=uigetfile('*.txt'); %fprintf('enter ecg file name :%s',file1); p=file1; t=sprintf('%s',p); b1=dlmread([file1]); len=length(b1); lead=input('enter lead number :'); %lead=str2double(lead); col2=b1(1:end,lead); e=fix(sqrt(len)); m=1; i=1:e j=1:e g2(i,j)=fix(col2(m)*1000); %amplifying 1000 m=m+1; end end g3=g2; i=1:e j=1:e ...
Read more

utf 8 - split utf-8 string into bytes in python -

i trying split utf-8 string bytes in python 3. problem is, when use bytearray, byte, encode etc functions array size of element 14 bytes, not 1 byte expected. need split text file sequence of bytes , send them byte after byte using sockets. tried this: infile = open (file, "r") str = infile.read() byte_str = bytes(str, 'utf-8') print("size of byte_str",sys.getsizeof(byte_str[0])) print gives me 14, need 1... suggestion? quoting official documentation : sys.getsizeof(object[, default]) return size of object in bytes. object can type of object. built-in objects return correct results, not have hold true third-party extensions implementation specific. only memory consumption directly attributed object accounted for, not memory consumption of objects refers to. if given, default returned if object not provide means retrieve size. otherwise typeerror raised. getsizeof() calls object’s __sizeof__ method , adds ...
Read more