Search the Community
Showing results for tags 'z-index'.
Found 14 results
-
Hi! I am new here and was wondering if I could possibly get some help. I am having some serious trouble trying to figure out why my menu won't sit behind my modal. =( I have wracked my brain trying to figure out what it could be, but have not been able to come up with a conclusion. Please ignore the text as the page is obviously still in testing, but the page shows how the modal goes in front. I also have other issues with IE in that the menu doesn't show up properly, but that may be due to too many style tags? I do very much enjoy my CSS. lol Things have evolved since 2009 ^_^; Here is the link to the page in question and I am attaching the raw files that I think you would need to see where I may have done something wrong. Is it possible that they just aren't compatible? www.technicolor-dreams.net/ani-001.html Thanks in advance! =D -Sarah Also... If you could... Could you explain things as simply as possible? I am not as advanced with coding in knowing all the terminology such as parent and sibling elements. >_<! css.css ani-001.html menu.html
-
Dear potential helpers, I try to darken the foreground of my website using a background-color. I created a div which wraps all my other HTML stuff, applied position: relative; to it and a very great z-Index of 999. All my other elements have a z-index of 100 or lower. Why isn't my div not shown in front of the other stuff? In case the background-color of my div foreground is only shown behind all the other elements inside it. Here is my HTML: <html> <body> <div id="foreground"> <!-- All my other HTML stuff having relative positioning and z-index 100 or less --> </div> </body> </html> Here is my CSS: #foreground { position: relative; z-index: 999; display: block; background-color: red; } Maybe u guys have any idea what the matter with this one. Thank you!
-
I tried it, but finally made so it. I gave z-index parameter or code by css but now everything is ok For Example: Film izle
-
Dear all: I have a header with 60% width occupied by a video, to the right of which is an aside section taking the remaining 40%. The aside section has three items fixed horizontally on top of each other. So the header has four elements in total. To account for possible overlaps between the four elements, I declared a z-index of -1 to the top right element, with the rest elements getting z-index 1 to 3. Then the element with z-index -1 disappeared. I then gave it z-index 1 and gave the others 2-4. Why has z-index -1 caused the element to disappear?
-
2 out of 3 is good! Now for the remaining change of behavior. For several years, a bit of code has produced a pop-up box containing a footnote or reference when a link was hovered. It still works, but now if the pop-up box overlaps an image, the text avoids the image below. You can see problem if you paste the attached code into the Try It Editor at http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain and hover on 'paradigm'. Something in <style> needs to be changed (apparently to keep up with bug fixes in html), but I can't find it. It seems to me that z=1 should make the presence of an image at z=0 irrelevant. It used to! (Immediate edit: I didn't see the attachment, so I changed the file from RTF to plain text and reattached...) Still no attachment visible, and it keeps saying 'No file chosen', so in case it means it, here is what the attachment would have said: --------------------------------------------------------------- <!DOCTYPE html><html> <style> a span { display : none ; } /* Author or dagger: blue, no underline */ a.n { color : blue ; text-decoration : none ; } /* Hover to display Reference or Note in popup box */ a.n:hover span { position : relative ; top : 0px ; /* Place box 1 line below anchor */ right : 10px ; /* Keep edge of box on screen */ display : block ; z-index : 1 ; color : black ; text-decoration : none ; font-size : .90em ; background-color: #ffd ; text-indent : 0 ; outline : 2px solid blue ; padding : 3px ; } .fl { float : left ; margin : 4px 16px 4px 0px; } </style> <body> <h2>Spectacular Mountain</h2> <figure> <img class="fl" src="pic_mountain.jpg" alt="Mountain View" style="width:50%"> <figcaption style="color:brown;">Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span> In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices. </figcaption></figure> <p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users. </p> </body> </html>
-
Hello, Thanks for taking the time to view my post. I am having an issue with my main navigation. The sub/hover menu seems stuck behind the main content area, and I have tried editing some of the CSS rules by adding z-index values, but I cannot fix the layering. Help, please! My menus are useless!... Thank you so much in advance for the help. Please let me know if you have any questions. Here is a link to the site: http://cuzzys.com/brickhouse/
-
Okay, i have uploaded an attachement to the post here, and as you see. I have some trouble with the menu. I am trying to make a menu just like this website: http://www.templateaccess.com/demos/responsive/html/devclub/index.html And no, it is not stealing. Only educational purpose use! Anyhow and regardless! As you see, the menu drop-down's are going behind the boxes i have right now. And not sure why. I have also attached the 3 .css files, coz the code is a little long, it should be very easy to find out how to work with it inside the .css files. I did try to use z-index with 100000 on .menu ul li ul li inside the panel css file, but since it did not work, i'm on a little thing i would call broke of ideas -.-'. Hope you guys can help me figure out what is wrong here, could be awsome! -Thanks NOTE: If you need more information, please do not hesitate to give a comment etc . And ohh, almost forgot to tell. The Menu is based on .JS file. Meaning i am using .JS to input the different menu-tabs etc to the panel. Hope you can make some sence of this whitch i cannot, just yet. -rootKID
-
See my code first <!DOCTYPE html><html><head><style> h1 {z-index:2;} img{position:absolute;left:0px;top:0px;z-index:1;}</style></head> <body><h1>This is a heading</h1><img src="w3css.gif" width="100" height="140" /><p>The z-index isn't working. The header should be in front of the image, but it isn't..</p></body></html> Actually the code is from http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex , i edited the code...Does z-index not work if we put positive numbers ?
-
Alright, my jQuery.tabs function goes over my custom div. I've tried to add z-index 0, 10, 500 to the custom div but tabs is still on the custom content. Any fix?
-
I am trying to figure out how to place text on top of a link image. Instead of all kinds of explaining here is a link to some test code. http://dutchbarn.net/issue01.html I have found some other questions on this forum that are simular but none seem to fix my problem. The 1st, 3rd, and 4th buttons perform the way I want. The second is an example of my attempt to place a heading on top of the image of course the image does not respond to the hover condition as the heading text is covering it. I can use an individual image file for each button with the text already part of the image but search engines won't see the text and it won't be part of the "html5 outline". It also does not seem to be a clean way to write the page as more downloading is needed than seems necessary. On the last button I used the image as a background but you will notice it does not display right when hovered over. Any suggestions?
-
I have run into a problem coding for a background image to be positioned absolutely to the top right of my column3 div container. I've attempted to give the image the following properties: position:absolute; top:0; right:0However, the image shows up, on the top left instead of top right. That said, the image is in a div that is floated left and has a z-index and therefore a position of relative. This is the only thing that I can figure to be causing the problem. If you think this is the problem, is there any way around it? If you don't think this is the problem, what might it be. On another note, something I hope you might help me understand is why the background-repeat:no-repeat; only works outside of the img style. I would expect it to work inside the img style, but instead it repeats. Thanks in advance for your help. Here is a link to the page http://aphoniastudio...2/about_ss.html and here is the css: @charset "UTF-8";/* CSS Document */ html {height:100%}body {background: #CCC;width: 95%;height: 95%;overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:none;}ul:active {background-color:#E1231E;}ul:visited {background-color:#E1231E;}.aboutlinks a:visited {color:#E1231E;}.aboutlinks {color:#E1231E; word-spacing:12px;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 2.1%;background-image: url(Images/conference1_ss.png);img {max-width: 100%;}background-size: 100%;background-repeat:no-repeat }#column1 {float: left;position: relative;width: 230px;height: 100%;max-height:700px;margin: 0px .5% 0px 7%;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding:8px 4px;}#p {font-size:13px;position:absolute;bottom:100px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;position:absolute;bottom:0;}.stretch {max-width:100%; max-height:100%;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 10%;height: 100%;color:#4D4D4D;font-size: .65em;font-weight:900;}nav {position: absolute;z-index: 2;background-color: #999;width: 10%;height: 100px;margin-top: 54px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {display:block;list-style-type: none;margin: 10px;padding: 0px;line-height:65%;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 30%;height: 80%;padding-top: 30px;padding-right: 2.8%;padding-bottom: 20px;padding-left: 5%;box-shadow:3px 3px 5px 0px #333333;overflow: auto;background-image: url(Images/triangle.png);background-repeat:no-repeat;img {position: absolute; right:0; top:0;max-width: 100%;}.aboutlinks {word-spacing: 2px;}#column4 {float: right;width: 20%;height:100%,padding: 0px;}#container #column2 nav ul li {}
-
I have an overflow tag set in body element that is working on one div element, but not the other. Could it be caused by the fact that the second div has a z-index? I've tried placing the overflow directly in the <div id="column3">, which is where the overflow, is happening to no avail. Does anyone see the problem or have any tips? Thanks. I've posted a junk site, so you can see the problem. http://aphoniastudios.com/TestSite/test.html Here's the css: @charset "UTF-8";/* CSS Document */ <style type="text/css">html {height:100%}body {background: #CCC;width: 90%;height: 90%overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:underline;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 50px;background-image:url(Images/junk.png);background-size: 100%;background-repeat:no-repeat;}.stretch { width:100%; height:100%;}#column1 {float: left;width: 230px;height: 100%;margin: 0px 4px 0px 49px;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding-right: 8px;padding-left: 8px;padding-top: 276px;padding-bottom: 16px;}#p {font-size:13px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 0%;height: 100%;color:#4D4D4D;font-size: .75em;}nav {background-color: #999;position: relative;z-index: 2;width: 120px;height: 100px;margin-left: 0px;margin-right: 0px;margin-top: 54px;margin-bottom: 0px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {margin: 10px;padding: 0px;}nav ul li {color: #FFF;text-decoration: none;list-style-type: none;line-height: 0.6em;font-size: 0.8em;font-style: normal;font-weight: 900;background-position: 0px 0px;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 20%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 140px;box-shadow:3px 3px 5px 0px #333333;}.aboutlinks {word-spacing: 2px;color: #E1231E;}#column4 {float: right;width: auto;height:100%,padding: 0px;}</style>
-
i have a simple table data cell <td> and i have 2 same-sized images i need to put in there, the first image is the <td> background image (which is a transparent png that has a grunge border) and the second image is just a regular JPG. Whenever i just add the <td background="images/bg.png> background PNG image and add the JPG image inside of the <td></td>, you cannot see the background PNG. I need to make the background PNG float over the top of the JPG image. I have tried playing around with z-index and css styles, etc but i cannot seem to make it work. Any help would be appreciated. I have attached 3 images, the brush-bg.png background image, the JPG image, and lastly a JPG of what i want it to look likeRegards,James
-
Hi I have some css3 and html5 that shows some text on a notepad with pages behind see http://www.sich.co.uk/learning/index.html. When this is put into my wordpresshomepage it does not work.The problem appears to be with the z-index and should be solved by putting in a high z-index no in the article.notepad however if I do this on the test page or in wordpress site it fails. So even in the test code as soon as I put a z-index: 2; in article for instance it fails. Take it out and it works perfectly.I have been banging my head against a brick wall on this one. Any help form all you WordPress, CSS3 & html5 gurus would be appreciated. I have included the source html and then the CSS. it is exactly the same code in the wordpress site. Any thoughts would be appreciated.StumpedPaul index.html stylenotepad.css
