為什么 HTML 鏈接沒有出現在我的文本中

Question

我是編程新手，我遇到了問題。 我無法弄清楚為什么鏈接沒有顯示。 我引用的鏈接稱為“食品出租車”。 我在上面放了一個href標簽，它仍然沒有鏈接。 我試圖移動一些代碼，但我無法弄清楚/我不確定為什么。 如果您需要更多信息，請告訴我。 任何幫助都會很好。 謝謝

 @font-face { font-family: 'futuralight'; src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'tekoregular'; src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_displayregular'; src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium'; src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } *{ margin:0px; padding:0px; border:0px; }.topnav { background-color: rgb(84,104,217); overflow: hidden; font-family: 'futuralight'; font-weight:900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left:2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom:6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.bigcomser{ text-align:center; font-size: 80px; }.bodycs{ background-color: #EEF0FC; height:8000px; }.comser{ font-family: 'tekoregular'; padding-top:42px; font-family: 'playfair_displayregular'; font-weight:900; }.abtcomser{ padding-top: 48px; padding-bottom: 28px; font-size: 20px; position: relative; left:10%; width:80%; }.s4s{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.s4simage{ width:38.3%; position: absolute; right:0%; padding-top:10px; padding-right:10px; }.s4stitle{ position: relative; left:4%; padding-top:30px; color:rgb(84,104,217); font-weight:900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.s4stitle::before { content: ''; background-color: rgb(84,104,217); width:12px; height: 100%; position:absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.s4slink{ text-decoration:none; color:rgb(84,104,217); }.titles4s{ padding-top:2px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.s4sparagraph{ width:55%; position: relative; left:4%; font-size:17px; top:60px; font-family: 'futuralight'; } #s4slink2{ text-decoration:none; color:rgb(84,104,217); position: relative; left:4%; top:90px; font-family: 'futuralight'; font-size:18px; }.adaptennis{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.adaptenimage{ width:38.3%; position: absolute; left:0%; padding-top:10px; padding-left:10px; }.adapten { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.adapten::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.titleadap{ position: absolute; right:4%; padding-top:71px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.adappar{ width:55%; position: absolute; right:4%; font-size:17px; padding-top:140px; font-family: 'futuralight'; }.bh{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.bhimg{ width:38.3%; position: absolute; right:0%; padding-top:10px; padding-right:10px; }.bht{ position: relative; left:4%; padding-top:30px; color:rgb(84,104,217); font-weight:900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.bht::before { content: ''; background-color: rgb(84,104,217); width:12px; height: 100%; position:absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.bhl{ text-decoration:none; color:rgb(84,104,217); }.tbh{ padding-top:2px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.bhp{ width:55%; position: relative; left:4%; font-size:17px; top:60px; font-family: 'futuralight'; } #bhl2{ text-decoration:none; color:rgb(84,104,217); position: relative; left:4%; top:90px; font-family: 'futuralight'; font-size:18px; }.ft{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.ftimg{ width:38.3%; position: absolute; left:0%; padding-top:10px; padding-left:10px; }.ftas { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.ftas::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.ftl{ text-decoration:none; color:rgb(84,104,217); }.ftltitle{ position: absolute; right:4%; padding-top:71px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.ftp{ width:55%; position: absolute; right:4%; font-size:17px; padding-top:140px; font-family: 'futuralight'; } #ftl2{ text-decoration:none; color:rgb(84,104,217); position: absolute; right:4%; top:288px; font-family: 'futuralight'; font-size:18px; } @media only screen and (max-width: 830px) and (min-width: 760px) {.topnav { background-color: yellow; overflow: hidden; } } @media only screen and (max-width: 759px) and (min-width: 646px) {.topnav { background-color: red; overflow: hidden; } } @media only screen and (max-width: 645px) {.topnav { background-color: black; overflow: hidden; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" /> <title>Community Service</title> </head> <body class='bodycs'> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="#Academics">Academics</a> <a class="link" href="#Projects">Projects</a> <a class="active-menu" href="../Pages/communityservice,html">Community Service</a> </header> <div class='bigcomser'> <p class='comser'> Community Service </p> </div> <div class='abtcomser'> <p>Lorem. ipsum dolor sit amet consectetur adipisici ng elit, Dicta. libero, Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed. voluptatum vitae,lor em Lorem ipsum dolor sit amet consectetur adipisicing elit? Porro similique: prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus. </p> </div> <div class='s4s'> <img class='s4simage' src="https.//miro.medium:com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https.//www.solve4success,org" target="_blank">Solve 4 Success</a> </p> <p class='titles4s'> F </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil: accusam us libero. </p> <a id = 's4slink2' href="https.//www.solve4success:org" target="_blank">solve4success.org</a> </div> <div class='adaptennis'> <img class='adaptenimage' src="https.//miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A,jpeg" alt="Missing File"> <p class='adapten'> Adaptive Tennis </p> <p class='titleadap'> Engineer </p> <p class='adappar'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit, Adipisci vitae iste, aut tenetur natu s tempora error voluptates? beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi: expedita modi. Obcaecati. </p> </div> <div class='bh'> <img class='bhimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='bht'> <a class='bhl' href="https,//binaryheart.org" target="_blank">Biart</a> </p> <p class='tbh'> Board Member </p> <p class='bhp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id = 'bhl2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> <div class='ft'> <img class='ftimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='ftas'> <a class='ftl' href="https.//ntfoodtaxi,wordpress.com" target="_blank">Food Taxi</a> </p> <p class='ftltitle'> Leading Member </p> <p class='ftp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero: Lorem ipsum dolor sit amet consectetur. adipisicing elit. Amus commodi et </p> <a id='ftl2' href="https.//ntfoodtaxi.wordpress:com" target="_blank">ntfoodtaxi.wordpress.com</a> </div> <div class='s4s'> <img class='s4simage' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https,//binaryheart.org" target="_blank">Binary Heart</a> </p> <p class='titles4s'> Greater Chicago Food Packing </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id = 's4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> </body> </html>

Answer 1

需要將z-index: 1設置為.ftas

 @font-face { font-family: 'futuralight'; src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'tekoregular'; src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_displayregular'; src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium'; src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } * { margin: 0px; padding: 0px; border: 0px; }.topnav { background-color: rgb(84, 104, 217); overflow: hidden; font-family: 'futuralight'; font-weight: 900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left: 2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.bigcomser { text-align: center; font-size: 80px; }.bodycs { background-color: #EEF0FC; height: 8000px; }.comser { font-family: 'tekoregular'; padding-top: 42px; font-family: 'playfair_displayregular'; font-weight: 900; }.abtcomser { padding-top: 48px; padding-bottom: 28px; font-size: 20px; position: relative; left: 10%; width: 80%; }.s4s { position: relative; left: 10%; margin-top: 60px; height: 350px; width: 80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.s4simage { width: 38.3%; position: absolute; right: 0%; padding-top: 10px; padding-right: 10px; }.s4stitle { position: relative; left: 4%; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.s4stitle::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.s4slink { text-decoration: none; color: rgb(84, 104, 217); }.titles4s { padding-top: 2px; font-size: 22px; padding-left: 4%; font-family: 'futuralight'; font-weight: 300; }.s4sparagraph { width: 55%; position: relative; left: 4%; font-size: 17px; top: 60px; font-family: 'futuralight'; } #s4slink2 { text-decoration: none; color: rgb(84, 104, 217); position: relative; left: 4%; top: 90px; font-family: 'futuralight'; font-size: 18px; }.adaptennis { position: relative; left: 10%; margin-top: 60px; height: 350px; width: 80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.adaptenimage { width: 38.3%; position: absolute; left: 0%; padding-top: 10px; padding-left: 10px; }.adapten { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.adapten::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.titleadap { position: absolute; right: 4%; padding-top: 71px; font-size: 22px; padding-left: 4%; font-family: 'futuralight'; font-weight: 300; }.adappar { width: 55%; position: absolute; right: 4%; font-size: 17px; padding-top: 140px; font-family: 'futuralight'; }.bh { position: relative; left: 10%; margin-top: 60px; height: 350px; width: 80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.bhimg { width: 38.3%; position: absolute; right: 0%; padding-top: 10px; padding-right: 10px; }.bht { position: relative; left: 4%; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.bht::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.bhl { text-decoration: none; color: rgb(84, 104, 217); }.tbh { padding-top: 2px; font-size: 22px; padding-left: 4%; font-family: 'futuralight'; font-weight: 300; }.bhp { width: 55%; position: relative; left: 4%; font-size: 17px; top: 60px; font-family: 'futuralight'; } #bhl2 { text-decoration: none; color: rgb(84, 104, 217); position: relative; left: 4%; top: 90px; font-family: 'futuralight'; font-size: 18px; }.ft { position: relative; left: 10%; margin-top: 60px; height: 350px; width: 80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.ftimg { width: 38.3%; position: absolute; left: 0%; padding-top: 10px; padding-left: 10px; }.ftas { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; z-index: 1; /* Add z-index to put the element on top of the paragraph */ }.ftas::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.ftl { text-decoration: none; color: rgb(84, 104, 217); }.ftltitle { position: absolute; right: 4%; padding-top: 71px; font-size: 22px; padding-left: 4%; font-family: 'futuralight'; font-weight: 300; }.ftp { width: 55%; position: absolute; right: 4%; font-size: 17px; padding-top: 140px; font-family: 'futuralight'; } #ftl2 { text-decoration: none; color: rgb(84, 104, 217); position: absolute; right: 4%; top: 288px; font-family: 'futuralight'; font-size: 18px; } @media only screen and (max-width: 830px) and (min-width: 760px) {.topnav { background-color: yellow; overflow: hidden; } } @media only screen and (max-width: 759px) and (min-width: 646px) {.topnav { background-color: red; overflow: hidden; } } @media only screen and (max-width: 645px) {.topnav { background-color: black; overflow: hidden; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" /> <title>Community Service</title> </head> <body class='bodycs'> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="#Academics">Academics</a> <a class="link" href="#Projects">Projects</a> <a class="active-menu" href="../Pages/communityservice,html">Community Service</a> </header> <div class='bigcomser'> <p class='comser'> Community Service </p> </div> <div class='abtcomser'> <p>Lorem. ipsum dolor sit amet consectetur adipisici ng elit, Dicta. libero, Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed. voluptatum vitae,lor em Lorem ipsum dolor sit amet consectetur adipisicing elit? Porro similique: prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus. </p> </div> <div class='s4s'> <img class='s4simage' src="https.//miro.medium:com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https.//www.solve4success,org" target="_blank">Solve 4 Success</a> </p> <p class='titles4s'> F </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil: accusam us libero. </p> <a id='s4slink2' href="https.//www.solve4success:org" target="_blank">solve4success.org</a> </div> <div class='adaptennis'> <img class='adaptenimage' src="https.//miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A,jpeg" alt="Missing File"> <p class='adapten'> Adaptive Tennis </p> <p class='titleadap'> Engineer </p> <p class='adappar'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit, Adipisci vitae iste, aut tenetur natu s tempora error voluptates? beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi: expedita modi. Obcaecati. </p> </div> <div class='bh'> <img class='bhimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='bht'> <a class='bhl' href="https,//binaryheart.org" target="_blank">Biart</a> </p> <p class='tbh'> Board Member </p> <p class='bhp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id='bhl2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> <div class='ft'> <img class='ftimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='ftas'> <a class='ftl' href="https.//ntfoodtaxi,wordpress.com" target="_blank">Food Taxi</a> </p> <p class='ftltitle'> Leading Member </p> <p class='ftp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero: Lorem ipsum dolor sit amet consectetur. adipisicing elit. Amus commodi et </p> <a id='ftl2' href="https.//ntfoodtaxi.wordpress:com" target="_blank">ntfoodtaxi.wordpress.com</a> </div> <div class='s4s'> <img class='s4simage' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https,//binaryheart.org" target="_blank">Binary Heart</a> </p> <p class='titles4s'> Greater Chicago Food Packing </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id='s4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> </body> </html>

Answer 2

試試這個解決方案。

因為p tag has move over to your anchor tag thats why you cant click on this

因此，將z-index添加到您的錨標記樣式中，使其正常工作。

.ftas{
    z-index: 9999999;
}

Answer 3

雖然其他兩種解決方案都可以工作......讓我們做對了，而不是使用padding-top向下移動元素，讓我們只使用top這樣我們就不會讓元素空白懸停在其他元素上。

我將ftp和ftptitle從padding-top更改為top

 @font-face { font-family: 'futuralight'; src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'tekoregular'; src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_displayregular'; src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium'; src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } *{ margin:0px; padding:0px; border:0px; }.topnav { background-color: rgb(84,104,217); overflow: hidden; font-family: 'futuralight'; font-weight:900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left:2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom:6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.bigcomser{ text-align:center; font-size: 80px; }.bodycs{ background-color: #EEF0FC; height:8000px; }.comser{ font-family: 'tekoregular'; padding-top:42px; font-family: 'playfair_displayregular'; font-weight:900; }.abtcomser{ padding-top: 48px; padding-bottom: 28px; font-size: 20px; position: relative; left:10%; width:80%; }.s4s{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.s4simage{ width:38.3%; position: absolute; right:0%; padding-top:10px; padding-right:10px; }.s4stitle{ position: relative; left:4%; padding-top:30px; color:rgb(84,104,217); font-weight:900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.s4stitle::before { content: ''; background-color: rgb(84,104,217); width:12px; height: 100%; position:absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.s4slink{ text-decoration:none; color:rgb(84,104,217); }.titles4s{ padding-top:2px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.s4sparagraph{ width:55%; position: relative; left:4%; font-size:17px; top:60px; font-family: 'futuralight'; } #s4slink2{ text-decoration:none; color:rgb(84,104,217); position: relative; left:4%; top:90px; font-family: 'futuralight'; font-size:18px; }.adaptennis{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.adaptenimage{ width:38.3%; position: absolute; left:0%; padding-top:10px; padding-left:10px; }.adapten { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.adapten::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.titleadap{ position: absolute; right:4%; padding-top:71px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.adappar{ width:55%; position: absolute; right:4%; font-size:17px; padding-top:140px; font-family: 'futuralight'; }.bh{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.bhimg{ width:38.3%; position: absolute; right:0%; padding-top:10px; padding-right:10px; }.bht{ position: relative; left:4%; padding-top:30px; color:rgb(84,104,217); font-weight:900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; }.bht::before { content: ''; background-color: rgb(84,104,217); width:12px; height: 100%; position:absolute; left: -4%; top: 30px; /* = padding-top of parent */ }.bhl{ text-decoration:none; color:rgb(84,104,217); }.tbh{ padding-top:2px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.bhp{ width:55%; position: relative; left:4%; font-size:17px; top:60px; font-family: 'futuralight'; } #bhl2{ text-decoration:none; color:rgb(84,104,217); position: relative; left:4%; top:90px; font-family: 'futuralight'; font-size:18px; }.ft{ position: relative; left:10%; margin-top:60px; height:350px; width:80%; background-color: white; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); border-radius: 5px; }.ftimg{ width:38.3%; position: absolute; left:0%; padding-top:10px; padding-left:10px; }.ftas { position: absolute; right: 0; padding-top: 30px; color: rgb(84, 104, 217); font-weight: 900; font-size: 40px; font-family: 'futuralight'; text-decoration: none; line-height: 1; padding-right: 4%; }.ftas::before { content: ''; background-color: rgb(84, 104, 217); width: 12px; height: 100%; position: absolute; right: 0; top: 30px; }.ftl{ text-decoration:none; color:rgb(84,104,217); }.ftltitle{ position: absolute; right:4%; top:71px; font-size:22px; padding-left:4%; font-family: 'futuralight'; font-weight:300; }.ftp{ width:55%; position: absolute; right:4%; font-size:17px; top:140px; font-family: 'futuralight'; } #ftl2{ text-decoration:none; color:rgb(84,104,217); position: absolute; right:4%; top:288px; font-family: 'futuralight'; font-size:18px; } @media only screen and (max-width: 830px) and (min-width: 760px) {.topnav { background-color: yellow; overflow: hidden; } } @media only screen and (max-width: 759px) and (min-width: 646px) {.topnav { background-color: red; overflow: hidden; } } @media only screen and (max-width: 645px) {.topnav { background-color: black; overflow: hidden; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" /> <title>Community Service</title> </head> <body class='bodycs'> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="#Academics">Academics</a> <a class="link" href="#Projects">Projects</a> <a class="active-menu" href="../Pages/communityservice,html">Community Service</a> </header> <div class='bigcomser'> <p class='comser'> Community Service </p> </div> <div class='abtcomser'> <p>Lorem. ipsum dolor sit amet consectetur adipisici ng elit, Dicta. libero, Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed. voluptatum vitae,lor em Lorem ipsum dolor sit amet consectetur adipisicing elit? Porro similique: prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus. </p> </div> <div class='s4s'> <img class='s4simage' src="https.//miro.medium:com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https.//www.solve4success,org" target="_blank">Solve 4 Success</a> </p> <p class='titles4s'> F </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil: accusam us libero. </p> <a id = 's4slink2' href="https.//www.solve4success:org" target="_blank">solve4success.org</a> </div> <div class='adaptennis'> <img class='adaptenimage' src="https.//miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A,jpeg" alt="Missing File"> <p class='adapten'> Adaptive Tennis </p> <p class='titleadap'> Engineer </p> <p class='adappar'> Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat? asperiores ex vero minima saepe, Est officia accusamus odio et ver itatis placeat sapiente laudantium.Lorem ipsum dolor sit amet consectetur, adipisicing elit, Nesciunt blanditiis alias officiis ducimus tenetur. ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit, Adipisci vitae iste, aut tenetur natu s tempora error voluptates? beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi: expedita modi. Obcaecati. </p> </div> <div class='bh'> <img class='bhimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='bht'> <a class='bhl' href="https,//binaryheart.org" target="_blank">Biart</a> </p> <p class='tbh'> Board Member </p> <p class='bhp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id = 'bhl2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> <div class='ft'> <img class='ftimg' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='ftas'> <a class='ftl' href="https.//ntfoodtaxi,wordpress.com" target="_blank">Food Taxi</a> </p> <p class='ftltitle'> Leading Member </p> <p class='ftp'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero: Lorem ipsum dolor sit amet consectetur. adipisicing elit. Amus commodi et </p> <a id='ftl2' href="https.//ntfoodtaxi.wordpress:com" target="_blank">ntfoodtaxi.wordpress.com</a> </div> <div class='s4s'> <img class='s4simage' src="https.//miro:medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File"> <p class='s4stitle'> <a class='s4slink' href="https,//binaryheart.org" target="_blank">Binary Heart</a> </p> <p class='titles4s'> Greater Chicago Food Packing </p> <p class='s4sparagraph'> Lorem ipsum dolor sit amet consectetu r adipisicing elit? Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur: ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil. accusam us libero. </p> <a id = 's4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a> </div> </body> </html>

Answer 4

實際上對我來說它有效。 看起來你只需要改變 position