My div has a position:absolute setting because I need it to be able to show/hide on my page.
However, now I want to add a Close Button in the top-right corner, but I am unable to do so because my div is already positioned absolutely.
If possible, please provide a solution without using JavaScript.
Thank you
If you want to position the button in the top right corner, you can include the following CSS properties:
top: 0;
right: 0;
Add these styles to your .closeBut selector. For a demonstration, check out this fiddle: http://jsfiddle.net/mJ6LG/
Placing children in absolute positioned parents using absolute positioning is perfectly fine. If you want to position it in the top right corner, you can use the following code:
.closeBut {
top: 10px;
right: 10px;
}
Check out the demo http://jsfiddle.net/XYZ456/2/
https://example.com/code-sample
.addList {
background-color:#f16529;
border:5px solid #c5330e;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:200px;
z-index:100;
padding: 25px 25px 20px 0px;
border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
.closeBut {
background:url(/img/close.png) no-repeat;
cursor:pointer;
width: 42px;
height: 20px;
border: none;
position:absolute;
padding-top: 0px; padding-right:0px;
}
.closeBut:hover {
background:url(/img/close_hov.png) no-repeat;
}
.alignBut{
text-align:right;
padding-right:25px;
}
Give this a shot!
Struggling with centering an image horizontally in a responsive manner while using Bootstrap v3.3.5? Here's my code: <div class="container"> <div style="margin:0 auto;"> <img src="images/logo.png" alt="logo" /> ...
I am currently in the process of building a cross-platform application utilizing HTML, CSS, and jQuery/JavaScript. My approach involves using AJAX requests to retrieve data from a database and send data to it as well. I have successfully implemented the &a ...
Hi there, I'm currently working on generating a PDF from HTML using jsPDF, but I've run into an issue with setting page margins. I would really appreciate any assistance on how to add margins to my pages using the canvas object. Below is the sou ...
The header has the fixed positioning property applied to it, causing the independent section to be impacted by this style rule. header{ position: fixed; top: 0; left: 0; width: 100%; padding: 25px 40px ; display: flex; just ...
I am currently dealing with two primary currencies in my business. The product page is created using HTML. There are 4 products on a single page, and I wish to display two prices for each product based on the selected currency (USD or EUR) without having t ...
I am working on a task management app that allows users to create a To-Do list and remove specific items from the list. Currently, I am facing an issue with using 'localStorage' to save the list when the page is refreshed. The problem arises when ...
New to Typescript and trying to incorporate a splitter into my project. I'm utilizing SplitPane from "react-split-pane/lib/SplitPane" and Pane from "react-split-pane/lib/Pane" in my Typescript project, but encountering an error: Could not find a de ...
Currently, I am in the process of creating a registration form for a website. I have implemented the handleChange function to alter the input text in the regData state. However, I am encountering an issue where every time I type something into an input fie ...
The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer. I attempted using h-full on the div element, but it had no noticeab ...
I've been attempting to update my jQuery library from version 1.3.2 (compressed) to jquery-1.10.2 (compressed) along with jquery-migrate-1.2.1 (compressed). However, after making this switch, none of the javascript pages on my website seem to be funct ...
I am encountering an issue with the code on my Wordpress website Here is a snippet of HTML: <div class="test"> <?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?> <img alt="icn" src="& ...
I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...
When utilizing a pdf component to convert an html page to pdf, there seems to be an issue with authorization when accessing the page via URL. In MVC, I am able to strip the html from the view without having to access it by URL. Is there something similar ...
My goal is to dynamically create a horizontal table by mapping through an array, similar to the design shown in this image. https://i.sstatic.net/YfElb.png This is how I am currently mapping through the array: const glanceGames = this.state.gameData.map ...
I'm having trouble identifying the issue in this code. I am attempting to change the background color using the following CSS: body { background-color: black; padding: 0px; margin:0px; height: 1500px; } However, it doesn't seem to ...
Seeking help to create a div resizer using only pure JavaScript as jQuery is restricted. The current functionality works, but breaks when the position of the slider-div is not set to absolute. Any solutions to fix this issue would be greatly appreciated. ...
Using a basic grid framework like , I have a fixed number of rows. I'm wondering if there's a simple way to ensure that all rows have the same height without explicitly setting the height of the .row class as a percentage. This is how my row cla ...
While working on creating a website, I came across a great template and decided to use it as inspiration. You can check out the template here. However, during the process, I encountered a common UI bug. When a user scrolls down the page, clicks on the "X ...
I have been working on unit testing for an Angular app, specifically trying to access styles from a .css file within the unit test. I will share with you what I have attempted so far. component.listedIps.length=0; fixture.detectChanges(); let whitelis ...
Is there a way to set the width of a column in bootstrap based on its content size? I am working with a list of items. The HTML code for this section is as follows: <div class="row"> <div class="col-lg-1 " style="background-color: re ...