Display an icon at the upper right corner of the container

Question

Display an icon at the upper right corner of the container

Is there a way to shift the question mark on hover to the top right corner of the white box instead of the bottom left corner?

<div class="panel panel-default">
  <div class="panel-heading">
    Test
  </div>
  <div class="panel-body">
    <div id="rptTitle">
      <br />
      <br />
      Text here....... text here......
      <br />
      <br />
    </div>
    <div class="questionBox" data-original-title="More Information" data-toggle="tooltip" data-placement="top">
      <i class="fa fa-question-circle grayColor"></i>
    </div>
  </div>
</div>

CSS:

.grayColor {
  color: #A6A6A6;
}

.panel {
  cursor: pointer;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #fff;
  opacity: 0.8;
}

.panel:hover {
  cursor: pointer;
  border: 1px solid #eee;
  background: #fff none repeat scroll 0 0;
  opacity: 1;
}

.panel:hover .panel-heading {
  background-color: #f6f6f6;
}

.panel .questionBox i {
  font-size: 15px;
  display: none;
}

.panel:hover .questionBox i {
  font-size: 15px;
  display: block;
}

JSFiddle

I attempted using position:absolute; and adjusting with right, top but it did not work well with multiple divs.

UPDATE:

https://i.sstatic.net/5OCj4.png

html css twitter-bootstrap font-awesome

Answer 1

Answer №1

For optimal results, consider positioning your outer window with relative positioning before absolutely positioning your icon.

Here is a suggested solution:

.window {
  position: relative;
}

.fa.fa-star {
  position: absolute;
  top: 0;
  right: 0;
}

Try This Solution on Fiddle

The rationale behind this approach is that when you use absolute positioning, the item is positioned based on its nearest ancestor element that has non-static positioning. Hence, the need for relative positioning of the window.

Imagine a container. The container has relative positioning. Any element inside that container positioned absolutely will be limited to the height and width of the container. By setting the icon's position as top: 0; right: 0, it will appear at the top right corner of the container, in this case, the window.

UPDATE

Based on your updated requirements, you might want to experiment with this code snippet:

#rptTitle {
  display: inline-block;
  width: 90%;
}

.questionBox {
  display: inline-block;
  float: right;
}

While not perfect, this quick solution should meet your current needs. Feel free to enhance it further using these principles :)

Check Out the New Fiddle

Answer 2

For optimal results, consider positioning your outer window with relative positioning before absolutely positioning your icon.

Here is a suggested solution:

.window {
  position: relative;
}

.fa.fa-star {
  position: absolute;
  top: 0;
  right: 0;
}

Try This Solution on Fiddle

The rationale behind this approach is that when you use absolute positioning, the item is positioned based on its nearest ancestor element that has non-static positioning. Hence, the need for relative positioning of the window.

Imagine a container. The container has relative positioning. Any element inside that container positioned absolutely will be limited to the height and width of the container. By setting the icon's position as top: 0; right: 0, it will appear at the top right corner of the container, in this case, the window.

UPDATE

Based on your updated requirements, you might want to experiment with this code snippet:

#rptTitle {
  display: inline-block;
  width: 90%;
}

.questionBox {
  display: inline-block;
  float: right;
}

While not perfect, this quick solution should meet your current needs. Feel free to enhance it further using these principles :)

Check Out the New Fiddle

Answer 3

Answer №2

Utilizing the position:absolute; property was a good start, but don't forget to also assign position:relative; to the parent element. Additionally, include top:0px and right:0px for the question mark element.

After updating the post, remember to nest the div within the panel-body class div and ensure that panel-body has position:relative; set.

Check out the updated code on JSFiddle

Answer 4

Utilizing the position:absolute; property was a good start, but don't forget to also assign position:relative; to the parent element. Additionally, include top:0px and right:0px for the question mark element.

After updating the post, remember to nest the div within the panel-body class div and ensure that panel-body has position:relative; set.

Check out the updated code on JSFiddle

Answer 5

Answer №3

Give this a try:

.questionBox > * {
  position: absolute;
  top:65px;
  right: 25px;
}

See it in action:

(newly updated) https://jsfiddle.net/2psr54zn/9/

Here's a different method (omitting the use of position: absolute)

https://jsfiddle.net/2psr54zn/11/

A third alternative approach:

https://jsfiddle.net/2psr54zn/12/

With the third technique, you can avoid using <br> tags. Instead, utilize padding.

Answer 6

Give this a try:

.questionBox > * {
  position: absolute;
  top:65px;
  right: 25px;
}

See it in action:

(newly updated) https://jsfiddle.net/2psr54zn/9/

Here's a different method (omitting the use of position: absolute)

https://jsfiddle.net/2psr54zn/11/

A third alternative approach:

https://jsfiddle.net/2psr54zn/12/

With the third technique, you can avoid using <br> tags. Instead, utilize padding.

Display an icon at the upper right corner of the container

Answer №1

Answer №2

Answer №3

Similar questions

Looking for a jQuery fix: How can I deactivate specific items once an item is selected?

Incorporating an Aspx Page into a Static Website

Tables that respond to changes in screen size, allowing nested table cells to inherit widths

`Can you teach me how to dynamically load HTML elements using input JSON data?`

Scrollable container with jQuery draggable functionality

The 'css' property cannot be set on something that is undefined

Leveraging HTML tables for input purposes

Replicate the cursor to make it show up twice

Align and resize image using CSS styling

Encoding and Displaying Characters in HTML with UTF-8

Leverage JSON as the primary data source for Assemble.io

What is the process for adjusting the border color of my button?

AngularJS 1: Dynamically updating input values in real-time

Guide to transforming plain text into HTML format using Angular 4

Encountering Issues with Formatting InnerHtml Text using RegEx

Having issues with the CSS block in my Jekyll dropdown navbar

Adjust the color of text using the <text-shadow> technique

Unable to utilize static files in node.js and express

The quantity addition and subtraction function is malfunctioning

Unexpected behavior in Internet Explorer with ChartJS version 2.6.0