score:2
Accepted answer
define a position other than static for your .card-body
div. for example:
.card-body {
z-index: 1;
position: relative;
}
here a snippet:
.card {
background-color: white;
width: 100%;
height: 300px;
padding: 20px;
margin-bottom: 20px;
border-radius: 2px;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 0px 0px 2px rgba(33,33,33,.05);
box-shadow: 0px 1px 2px rgba(33,33,33,.2);
cursor: default;
z-index:1;
position: relative;
}
.card-bg {
background-color: transparent;
width: 100%;
height: 300px;
padding: 20px;
margin-bottom: 20px;
border-radius: 2px;
z-index:0;
position: absolute;
}
.card-body {
z-index: 1;
position: relative;
}
<div class="card">
<div class="card-bg"><svg/></div>
<div class="card-top">
<div>
<div class="card-header">{{circle.name }}</div>
<div class="card-subheader">last updated {{circle.datecreated}}</div>
</div>
</div>
<div class="card-body">
<a href="#" onclick=""><span>link one</span></a>
<a href="#" onclick=""><span>link two</span></a>
<a href="#" onclick=""><span>link three</span></a>
<a href="#" onclick=""><span>link four</span></a>
<a href="#" onclick=""><span>link five</span></a>
</div>
</div>
Source: stackoverflow.com
Related Query
- Placing a d3 graph in div blocks the links above it
- Adding label to the links in D3 force directed graph
- The links between the nodes in Force-Directed Graph in D3 Javascript
- Updating nodes and links with labels in d3 force directed network graph is not removing the nodes properly
- Fade links and nodes that are not immediately connected to the node hovered on in a d3 graph
- End points of the links of the force directed graph always stuck to left corner of the rectangular node
- Drawing links that do not affect the physics of a force directed graph
- d3.js force graph : links spreading the graph too much
- Placing labels at the center of nodes in d3.js
- d3.select("#element") not working when code above the html element
- Updating links on a force directed graph from dynamic json data
- Simple graph of nodes and links without using force layout
- Add text/label onto links in D3 force directed graph
- Is D3.js the right choice for real-time visualization of Neo4j Graph DB data
- semantic zooming of the force directed graph in d3
- Can d3.js draw two scatterplots on the same graph using data from the same source?
- D3 highlight selected node, and its links to parent and ancestors in a force directed graph
- Labels / text on the nodes of a D3 force directed graph
- Placing a circle over a sparkline when the user changes the ordering of the data
- how find out if force layout done placing the nodes?
- Add Unique Links to all d3.js Data Points in Graph
- Adding text to the center of a D3 Donut Graph
- How to properly get text width to center labels above graph bars?
- D3 updating graph with new elements create edges with the wrong nodes
- Adding a horizontal line to d3 graph displays at the wrong value
- How do I control the bounce entry of a Force Directed Graph in D3?
- I want to add text on the link in D3.js tree graph
- how do i format the value shown in a d3 graph
- enclosing the nodes of a d3 force directed graph in a circle or a polygon or a cloud
- I want to distinguish the link of d3.js force graph by the thickness
More Query from same tag
- Interchange time and linear scaling depending on user selection
- dc.js - horizontal bar chart / row chat, or rotate d3.svg?
- How to obtain percentage in tooltips of an nvd3 pie chart?
- Width limit on D3 force layout centers
- How to position text labels on a Sunburst chart with d3.js
- Line chart of D3.js won't show due to <path> attribute d: Expected number, "M0,NaNL38.695652173…"
- D3 collapsable tree path labels upside down
- d3.keys() syntax clarification?
- unable to load csv to d3 scatter plot
- "TypeError: root.children is undefined" on Collapsible Tree d3 v3
- What is the purpose of `constant.js` in d3-drag library?
- How to import a d3 v4 / v5 module into a Node project but keep the D3 v3 namespace style (d3.)?
- d3 click event do not working after clone element append for drag event
- d.label is reading undefined on D3 Line chart
- Three.js globe - Make countries clickable
- Fading network connections in directed network - d3js
- checkbox check/uncheck using d3
- jQuery .text() is working but not .html()
- unable to show text over the node in d3 force layout
- How to show ticks each 1.5 on D3.js?
- Remove Cells from D3 Observable When Embedding into Application
- d3 topojson wont generate state outlines
- d3js Create legend for bar chart
- Redrawing a key on top of a D3 projection after transition
- I am using SVG style to apply the css property to an element. The code snippet is below:
- Rickshaw Graphs rotate ticks by -90 degrees
- How can I define a maximal amount of ticks in a d3.svg.axis
- Use PhantomJS crowbar to extract D3-created SVG from webpage on local webserver
- D3 Transform Rescale X jumps to right
- Zoomable Circle Packing with Chord D3