An absolute positioned div located beyond the confines of the body element

I am trying to have just half of my div visible at the bottom of my page. I attempted using bottom:-100px, margin-bottom:-100px, and padding-bottom:-100px, but none of these methods seem to be working.

Does anyone have a solution for this issue?

If you would like to view my JSFIDDLE, please click here: https://jsfiddle.net/cuxyrfh8/6/

div {
  background: pink;
  position: absolute;
  height: 200px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  width: 400px;
  border: 5px black solid;
  bottom:-100px;
}
htmlcsspositionabsolute

Answer №1

The positioning of the div is currently set to be 100px outside the visible viewport. To prevent scrolling in this case, you can utilize the CSS property overflow: hidden;.

Additional Note: In situations where the height of the body surpasses that of the viewport, adjusting the position: relative; attribute on the div element allows it to align properly within the body.

Another Update: For scenarios where a partially displayed div is needed on a vertically scrolled page, creating a wrapper element and applying specific overflow and position declarations to it becomes essential.

body {
  margin: 0;
}
.wrapper {
  height: 1000px;
  overflow: hidden;
  position: relative;
}
.wrapper div {
  background: pink;
  position: absolute;
  height: 200px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  width: 400px;
  border: 5px black solid;
  bottom:-100px;
}
<div class="wrapper">
  <div></div>
</div>

Answer №2

Avoid using negative paddings as they do not work properly. Instead, utilize a wrapper element:

HTML

<div class="wrapper">
    <div class="thediv">
    </div>
</div>

CSS

.wrapper {
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.thediv {
    background: pink;
    position: absolute;
    height: 200px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    width: 400px;
    border: 5px black solid;
    top: 0;
}

JSFiddle

Answer №3

To achieve your desired outcome, simply switch the position of the element from aboslute to fixed, as shown below:

div{
    background:purple;
    border:3px red solid;
    bottom:-50px;
    height:150px;
    left:0;
    margin:0 auto;
    position:fixed;
    right:0;
    width:300px;
}
<div></div>

Answer №4

Placing the <div> at a <b>bottom position of -100px</b> will cause it to move down by 100 pixels, revealing the entire content and triggering a scrollbar.

To prevent this, add overflow: hidden to the body CSS style on your page.

body {
  overflow: hidden;
}
div {
  background: pink;
  position: absolute;
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  border: 5px black solid;
  bottom: -100px;
}
div:hover {
  bottom: 0px;
}
<div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with margin:auto in Internet Explorer 5

I have been experimenting with IE11's developer tools and discovered that when changing the browser mode, everything appears as expected in Edge, 10, 9, 8, and 7. However, in IE5, the div is forced to align to the left instead of the middle. Could so ...

htmlcssinternet-explorerinternet-explorer-5

How to align text to the right in Bootstrap 4

I'm having an issue with my text alignment when using the original bootstrap CSS. Instead of aligning left and right, the text is simply displayed side by side. .text-left { text-align: left!important } .text-right { text-align: right!impor ...

htmlcsstwitter-bootstrapbootstrap-4

The Evolution of Alternatives to contentEditable

Related: ContentEditable Alternative I am curious about the timeline of online WYSIWYG editors prior to the existence of contentEditable. I remember using GDocs and GMail with rich-text features that functioned similarly to contentEditable. I would appre ...

javascripthtmlcontenteditable

Using Java code to show a tag on the screen

I attempted to display the label "until" when the user selects "range", but unfortunately, the label did not appear. Below are the codes I used. <td><select onchange="Show(this,'vin','until1');" <option v ...

javascripthtml

Having trouble aligning elements in a Bootstrap navbar with the float property

Struggling with aligning elements in the right position within the bootstrap navbar. I want to float Option 1 and Option 2 elements to the right and center the Search Input. Despite trying the !important rule, it still doesn't seem to work properly. A ...

csshtmltwitter-bootstrapbootstrap-4

CSS design sheets are an essential component of web development

I have been attempting to display the versions one below the other, but so far I haven't been successful. Here is the code I am working with: <input type="text" data-ng-model="file" typeahead="document as document.fi ...

htmlcss

Is it possible to use the Web Interface of the Watson Retrieve and Rank service to upload a zip file containing htmls or another zip file containing json files?

Is it possible to utilize the Web Interface of Watson Retrieve and Rank service to upload a zip file containing HTMLs or a zip file with JSON files? ...

htmljsonibm-watsonwatsonretrieve-and-rank

What are some effective methods for dynamically styling elements during iteration?

Need assistance with styling dynamic elements during iteration Located on the test.phtml page <?php foreach($tests => $test) { ?> <li class="<?php echo $test['class'] ?>"> <a href="#" title=""> Test In ...

htmlcssiteration

Color highlighting in dropdown HTML items

I'm trying to create a dropdown menu with alternating colors for the items. Can someone please provide the CSS code needed to style dropdown list items using ODD and EVEN? ...

htmlcss

Tips for using jQuery dropdown menus

I am currently in the process of creating a prototype for a quick dropdown menu using jQuery. However, I have reached the limits of my knowledge on jQuery and could use some assistance in solving my issue. My objective is to have a dropdown animate down w ...

javascriptjqueryhtmlcss

How can I create a custom Sweet Alert button in JavaScript that redirects to a specific webpage when clicked?

Here's what I have in my code: swal({ title: 'Successfully Registered!', text: "Would you like to proceed to the Log In page?", type: 'success', showCancelButton: true, confirmButtonColor: '#308 ...

javascriptjqueryhtmlsweetalertsweetalert2

Styling HTML code using Python

Looking for a way to automate the extraction of specific HTML code from a list of URLs in a CSV file using Python? Look no further! With this solution, you can easily download and save desired parts of the HTML code into another column. For instance: By ...

pythonhtmlpython-3.xcsv

Swapping IMG depending on breakpoint in Material-UI

I understand how to adjust styling with breakpoints for various properties like height, width, and font size. However, I am struggling to find examples of switching images based on screen sizes. My goal is to replace an image with a different one dependin ...

cssreactjsmaterial-uiresponsive-images

The connection between an HTML form and PHP is not being established

variable-passing.php `<form method="post" action="variable-catching.php"> <input type="text" name="name1"/><br/> <input type="text" name="name2"/><br/> <input type="text" name="name3"/><br/> <input type="te ...

phphtmlforms

Getting hold of HTML elements in a div on a different page

Recently diving into the world of html/javascript, I find myself engaged in a project where I'm loading an external html page within a div. The loaded content looks like this: <div class="content" id="content"> <object ty ...

javascripthtmlelectron

Ways to take out an object from the scene in three.js

As a complete beginner in three.js, I am currently working on a small website and facing an issue. Everything is functioning correctly, but I am struggling to remove an OBJ from the scene. How can I achieve this? Specifically, I would like the OBJ to disa ...

htmlthree.js

Is it possible to vertically align variable length text within a container of fixed height?

One common method for centering text inside a div is to use the following CSS trick: .center-div { display:table-cell; vertical-align: middle; } The issue arises when the text within the div varies in length and I require the container to have fi ...

htmlcss

What is the best way to connect a CSS file to a jade document?

Having some trouble linking normalize.css while using socket and express. html head title= "Real time web chat" link(href='/css/normalize.css') script(src='/chat.js') ...

cssnode.jsexpresspug

What is the best way to assign an array from a text input field to a JavaScript variable?

How can I input an array like [1, 2, 3] into a text input on an HTML page and then apply it to the var array in a function named inputArray() when a button is clicked? I attempted to do this with: var array=document.querySelector("#inputNumber" ...

javascripthtmlarraysdom

Tips for dynamically inserting a new column into a table at any position other than the beginning or end

I have created a dynamic table where rows and columns can be added dynamically. However, I am facing an issue where I am unable to add a new column between the first and last column of the table. Currently, new columns are only being added at the end. $ ...

javascriptjqueryhtmlcsshtml-table