天道酬勤,学无止境

when div with absolute position is added cannot click on links

Question

I have menu on a page and div that is absolute positioned. The problem is that when this div is on a page, then I cannot click on any links in menu items.

When I remove this div (#left_border), then links are clickable again.

Why?

CSS:

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
   top: 0px;
}  

HTML:

<div id="wrapper">
<div id="content">
    <div id="left_border"></div>
    <div id="left">
        <div id="menu">
            <ul class="menu">
                <li class="item-101 current active deeper parent"><a href="/">Home</a>

                    <ul>
                        <li class="item-107"><a href="/index.php/home/news">News</a>

                        </li>
                    </ul>
                </li>
                <li class="item-102 deeper parent"><a href="/index.php/merchants-shops">Merchants / Shops</a>
                </li>                    
            </ul>
        </div>
    </div>       
</div>

Here you see, that you cannot click on menu items: http://jsfiddle.net/Dq6F4/

Answer1

CSS - to unblock clicking add to #left_border class following statement:

pointer-events: none 

(it is cross-browser solution including >= IE11)

Here is source of this solution with more informations. I tested it on chrome, firefox and safari (macOs and iOS) and works :)

Answer2

Add a z-index:-1; This will allow the links to be clicked. As The Div is absolutely positioned over the links and hence it is not allowing clickability.

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
   top: 0px;
    z-index:-1;
}  

Here is the Working Solution for the same.

Hope this Helps.

Answer3

Add position:relative to #menu

#menu
{
    position:relative;
}

JS Fiddle Demo

Answer4

put z-index:1 to that component which has absolute property.

for example:

function myFunction() {
  document.getElementById("print").innerHTML = "Hello World";
}
.custcontainer {
    position: relative;
    
}
.custcontainer .like {
    position: absolute;
    top: 18%;
    left: 10%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    cursor: pointer;
    font-size:30px;
    text-align: center;
    z-index: 1;
}
<div class="custcontainer">
  <P id="print"></p>
  <button onclick="myFunction()" class="like">like</button>
  <img src="https://www.crownplumbing.co/wp-content/uploads/2015/07/placeholder.gif"/>
</div>
Answer5

you have a problem with z-index..

it is covering the menu elements:

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
    top: 0px;
    z-index:-111;
}

http://jsfiddle.net/Dq6F4/2/

Answer6

Your problem is actually with #left_border covering the links as overlay. limit it's width.. e.g.

#left_border{
  width:50px;
}
Answer7

Z-index only works on positioned elements. A positioned elements is an element whose position value is either set to absolute, fixed, relative, or sticky. That is, the element has to be set to any position value other than static, which is the default position value. See this article

Answer8

Use Google Chrome or Mozilla Firefox's Developer tools to hover over your links and divs (or select them). This way you can see what is going on, and most probably, there is another div or other object stacked on top of your links, which is preventing your from clicking them. Firefox also has a 3D option, which visualizes all this even better:

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view
Answer9

I found a very simple solution that works!I set the left to a percentage-it was in pixels- and added a margin-left in pixels.And that worked like a charm!! http://2letscode.blogspot.com/2014/07/links-not-clickable-when-inside.html

标签

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

相关推荐
  • Selenium web UI automated testing-eight positioning methods
    When doing UI automation testing, the most important and most basic thing should be the positioning control. There are eight positioning methods on the web side, as follows: 1. driver.find_element_by_id How to check the id of the control: Go to the web, right-click, and click "Check" to bring up the developer mode. The steps are as follows: Want to view the source code of the method: hold down ctrl, and then click the method name with the mousePositioning by id, id is unique on the web code show as below: from selenium import webdriver #从selenium库中导入webdriver模块,selenium底层核心就是webdriver driver =
  • Link inside a div link [duplicate]
    Question This question already has answers here: Links inside of larger clickable areas (CSS Only) (2 answers) Closed 5 years ago. I would like to have a div that contains an image and some text be a link. So that one can click anywhere (not necessarily the image or text) in the div and be taken to one location. However I would also like there to be another link at the end of the text that brings the user to another location. However, once I add this second link the whole div no longer is a link and just the image and text are links. Is what I am want to do possible? Answer1 It is not possible
  • HTML/CSS project exercise-Xiaomi homepage
    Article DirectoryProject constructionBuildPublic styleTop navigation structurePublic style indexTop navigation styleDrop-down layer Head logostructurestyleHead navigation barstructurestyleHeader navigation drop-down layerstructurestyleSearch box on the rightstructurestyleLeft navigation barstructure Complete bannerstructurestyleRight toolbarMiddle advertisement columnstructurestyleProject supplementExercise summary topbarNavigation bar sectionQR code part header logo Project construction Build Create index.html Put the css folder, add reset.cssCopy fs folder, picture folder Change the title of
  • How to enable Bootstrap tooltip on disabled button?
    Question I need to display a tooltip on a disabled button and remove it on an enabled button. Currently, it works in reverse. What is the best way to invert this behaviour? $('[rel=tooltip]').tooltip(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <hr> <button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
  • Tooltips for mobile browsers
    Question I currently set the title attribute of some HTML if I want to provide more information: <p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p> Then in CSS: .more_info { border-bottom: 1px dotted; } Works very nice, visual indicator to move the mouse over and then a little popup with more information. But on mobile browsers, I don't get that tooltip. title attributes don't seem to have an effect. What's the proper way to give more information on a piece of text in a mobile browser? Same as above but use Javascript to listen for a
  • Possible to disable “Watch on Youtube” link?
    Question I am building an app where I am embedding videos and specific sections of video clips. For example, it looks like this <iframe width="640" height="360" src="https://www.youtube.com/embed/pftnJbQjSBA&modestbranding=1&showinfo=0&autoplay=1&controls=0&modestbranding=1&disablekb=1&rel=0&start=10&end=20" frameborder="0"></iframe> Is it possible to disable "Watch on youtube" link so the user doesn't end up navigating elsewhere. Just to be clear, I only want to control the flow while the video is being watched (i.e not trying to interfere with ads or YouTube logo). Answer1 It is possible
  • Make a div into a link
    Question I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link. I'm looking for something like <a href="…"><div> … </div></a>, but that is valid XHTML 1.1. Answer1 Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup. For me the no-nos are: javascript (shouldn't be needed just
  • Slide right to left?
    Question How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right. Answer1 $("#slide").animate({width:'toggle'},350); Reference: https://api.jquery.com/animate/ Answer2 This can be achieved natively using the jQueryUI hide/show methods. Eg. // To slide something leftwards into view, // with a delay of 1000 msec $("div").click(function () { $(this).show("slide", { direction: "left" }, 1000); }); Reference: http://docs.jquery.com/UI/Effects/Slide Answer3 Use this: $('#pollSlider-button').animate({
  • About CSS, you should know these
    1. CSS box model, the difference in different browsers css standard box model The css box model is also called the box model, which contains elements of content, padding, border, and margin. As shown below: The inner layer in the figure is content followed by padding border margin. Usually when we set the background, it is the content, the inner margin, and the border. If the border is set to the color, the boder color will be displayed. When the boder color is transparent, the background-color color will be displayed. The child elements of this element start from content. The margins are
  • offsetting an html anchor to adjust for fixed header [duplicate]
    Question This question already has answers here: Fixed page header overlaps in-page anchors (37 answers) Closed 5 years ago. I am trying to clean up the way my anchors work. I have a header that is fixed to the top of the page, so when you link to an anchor elsewhere in the page, the page jumps so the anchor is at the top of the page, leaving the content behind the fixed header (I hope that makes sense). I need a way to offset the anchor by the 25px from the height of the header. I would prefer HTML or CSS, but Javascript would be acceptable as well. Answer1 You could just use CSS without any
  • The difference between pseudo-classes and pseudo-elements has their respective usage
    The difference and precautions between CSS3 pseudo-classes and pseudo-elements The concepts of pseudo-classes and pseudo-elements in CSS are very easy to confuse. Let’s talk about the difference between pseudo-classes and pseudo-elements today. Definition First, let's take a look at the definition of pseudo-classes and pseudo-elements This is how they are explained in w3c Pseudo class: used to add special effects to certain selectorsPseudo-element: used to add special effects to certain selectors To be reasonable, maybe my language is not good, I think these two sentences are equivalent 😃 I
  • Web-based CSS (full text 3w5k words, to be continued)
    Article Directory CSS learning 00. The way to use CSS styles 0.0 Limitations of HTML 0.1 HTML <! DOCTYPE> declaration tag 0.2 Inline (inline) style sheet (inline) 0.3 Embedded (internal) style sheet (embedded) 0.4 Introduced (external) style sheet (linked) 0.5 Summary of CSS introduction 0.6 CSS syntax specification 0.7 CSS code style 01. Define the style sheet 1.1 HTML markup definition 1.2 Class definition 1.3 ID selector 1.4 Priority issues 1.5 Combination selector (control multiple elements at the same time) 1.6 Pseudo element selector 02. Common attributes 2.1 Color attributes 03. Font
  • Python crawls Baidu library paid documents (PDF)
    Python crawls Baidu Library paid documents (PDF) @TOC PS: This article is a small share for me to learn python, it is only for learning and reference, and it is not allowed to steal commercial interests! Tool preparation Python3.x; Python库:selenium、requests; Crawling pages and crawling analysis https://wenku.baidu.com/view/9a5a21cf964bcf84b9d57bea?pn=50 Open the website, place the mouse on the first page, right-click to open the element, you can see that the picture comes from a link. We open this link. It can be clearly seen that this is a download link of an image. So we need to crawl this
  • Use javascript to click on a pseudo-element?
    Question I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code. Link: http://jsfiddle.net/Vv6Eb/4/ HTML: <div></div> CSS: div { position:relative; background-color:#333; padding:20px; margin:20px; float:left; } div:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px
  • Basic usage of html and cs, js, jq
    # web01 1. Web front end: learn how to build a page 2. Database: Learn how to add, delete, modify and check data 3. Servlet: Determine the purpose of the request and make the corresponding response (get the request and respond) ###server -Refers to a high-performance computer -Web server: a high-performance computer with web service software installed -Mail server: a high-performance computer that installs mail service software -Database server: Database service software is installed on a high-performance computer -ftp server: File upload and download service is installed on a high-performance
  • Make anchor link go some pixels above where it's linked to
    Question I'm not sure the best way to ask/search for this question: When you click on an anchor link, it brings you to that section of the page with the linked-to area now at the VERY TOP of the page. I would like the anchor link to send me to that part of the page, but I would like some space at the top. As in, I don't want it to send me to the linked-to part with it at the VERY TOP, I would like 100 or so pixels of space there. Does this make sense? Is this possible? Edited to show code - it's just an anchor tag: <a href="#anchor">Click me!</a> <p id="anchor">I should be 100px below where I
  • Front-end theoretical knowledge (1)
    Front-end theoretical knowledge (1) html What is the role of doctype?What is the difference between standard mode and compatibility mode? How many Doctype document types do you know The function of DOCTYPE is to tell the browser's parser what document standard to use to parse this document. The standard mode runs at the highest standard supported by the browser. In compatibility mode, the behavior of old browsers is simulated to prevent the site from not working. Simply put, it is to show what can be displayed to the user as much as possible. There are three types of document definitions in
  • Are you allowed to nest a link inside of a link?
    Question This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below: I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code: <a href="#" class="sp_mngt_bar"> <h1><?php echo $v; ?></h1> <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a> <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> </a> Is this a good practice? Am I doing it wrong? How would you do this? Thanks for the help! Answer1 Straight from the W3C for HTML4: 12.2.2
  • Mobile Webkit reflow issue
    Question I've been experiencing an issue in mobile versions of webkit (specifically Webkit 534.46 on iOS 5.1.1 as mobile Safari, and now Chrome for iOS) which doesn't happen on any desktop browser that I've seen. (i.e. the demos below should be viewed on a mobile version of webkit.) Here is a live example of the issue. The core of the CSS is extremely straight forward. It positions an alphabet index along the left of the page: #index { left:0; margin:0; padding:0; position:fixed; top:0; width:3em; } The issue happens when an element is fixed position over the top of the body. It is fully able
  • Is it possible to show a div on click using the :active selector in CSS?
    Question I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery. Answer1 Working FIDDLE Demo Consider that you want something like this: We write our markup as simple as possible. One element for container, one element for our link and one another element for popup: <!-- [container] --> <div class="link-with-popup"> <!-- link --> <div class="link">CSS</div> <!-- [popup] --> <div class="popup"> <div class="box">CSS Description</div> </div> <!-- [/popup] --> </div> <!-- [/container] --> Here is our layer structure in picture: CONTAINER Let's write CSS for our container.